بسم الله الرحمن الرحيم
ازرار التقييم والاعجاب بشكل جديد لنسخة Modern
ازرار اعجبني ولم يعجبني صار فيهم صور,
وزر التقييم الإيجابي صار لايك وعليه صورة ,
وزر التقييم السلبي صار دسلايك وعليه صورة,
و ازرار التقييم لا تظهر في مساهماتك . تظهر لك في مساهمات الاعضاء الاخرين بمعنى انك لا تستطيع تقييم نفسك,
وازرار اعجبني ولم يعجبني تظهر للجميع
معاينة الكود :
تركيب الكود :
اول شيء يجب ان تكون نسخة منتداك ModernBB
ثاني شيء يجب تفعيل نظام السمعة.
وكذلك تفعيل : نظام أعجبني ولم يعجبني
ثم اذهب الى التومبيلات والقوالب
ضع الكود التالي في اعلى قالب المواضيع viewtopic_body
CODE
<style>
.fa_vote, .fa_voted, .fa_count {
font-size:12px;
font-family:Verdana, Arial, Helvetica, Sans-serif;
display:inline-block !important;
width:auto !important;
float:none !important;
transition:300ms;
}
.fa_vote:hover, .fa_voted {
background-image: url(https://ar.seaicons.com/wp-content/uploads/2015/08/heart-icon.png);
opacity: .6;
}
.fa_voted { cursor:default }
.fa_count {
font-weight:bold;
margin:0 3px;
cursor:default;
}
.fa_positive { color:#4A0 }
.fa_negative { color:#A44 }
.fa_votebar_inner {
background: #4a00;
transition: 300ms;
}
.fa_votebar, .fa_votebar_inner {
background: #c440;
height: 3px;
}
span.fa_voted.fa_plus {
color: #fff;
height: 37px;
padding: 7px;
}
span.fa_voted.fa_minus {
color: #fff;
height: 37px;
padding: 7px;
}
span.fa_voted.fa_minus {
color: #fff;
height: 37px;
padding: 7px;
}
.fa_voted, .fa_vote {
background: #2b596f;
border: solid #2b596f 2px;
cursor: default;
padding: 4px;
vertical-align: middle;
}
li.fa_reputation {
margin-left: 5px;
float: right;
}
.rep-button, .rep-button:active, .rep-button:focus {
margin: 0 0 0 6px;
vertical-align: middle;
padding: 6px 7px;
}
::marker {
font-size: 0;
}
.rep-button, .rep-button:active, .rep-button:focus {
background-color: #2b596f;
}
i.ion-thumbsdown, i.ion-thumbsup {
font-size: 0;
vertical-align: 17px;
}
a.fa_voted.fa_plus, a.fa_voted.fa_minus, a.fa_vote.fa_plus, a.fa_vote.fa_minus {
font-size: medium;
color: white;
}
.rep-button img, {
float: right;
margin-left: 5px;
vertical-align: middle;
width: 25px;
height: 25px;
}
a.fa_voted.fa_minus img, a.fa_voted.fa_plus img, button.rep-button.fa_like img, button.rep-button.fa_dislike img, .rep-button.fa_liked img, .rep-button.fa_disliked img {
float: right;
margin-left: 5px;
vertical-align: middle;
width: 25px;
height: 25px;
}
.rep-button img, a.fa_vote.fa_plus img, a.fa_vote.fa_minus img{
float: right;
height: 25px;
margin-left: 5px;
vertical-align: middle;
width: 25px;
}
.rep-nb {
background-color: rgba(255,255,255,0.25);
border-radius: 2px;
font-size: 11px;
margin-right: 7px;
padding-top: 11px;
padding-right: 15px;
padding-bottom: 11px;
padding-left: 15px;
vertical-align: 1px;
}
.rep-button.fa_liked, .rep-button.fa_disliked {
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 0px;
}
</style>
<script type="text/javascript">
$(window).load(function() {
$("li.fa_reputation, .fa_count, .fa_vote, .fa_voted").each(function() {
$(this).find("a.fa_voted.fa_plus").html('لايك<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
$(this).find("a.fa_voted.fa_minus").html('دسلايك<img src="https://i.servimg.com/u/f70/17/17/86/62/angry-10.png" />');
$(this).find("a.fa_vote.fa_plus").html('لايك<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn10.png" />');
$(this).find("a.fa_vote.fa_minus").html('دسلايك<img src="https://i.servimg.com/u/f70/17/17/86/62/angry-10.png" />');
});
});
</script>
<script type="text/javascript">
$(window).load(function() {
$("button.rep-button.fa_like, .rep-button.fa_liked").each(function() {
$(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn11.png" />');
});
});
</script>
<script type="text/javascript">
$(window).load(function() {
$("button.rep-button.fa_dislike, .rep-button.fa_disliked").each(function() {
$(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f45/15/36/45/50/funny-10.png" />');
});
});
</script>
<script type="text/javascript">
$(window).load(function() {
$(".rep-button").each(function() {
$(this).find("i.ion-thumbsup").html('<img src="https://i.servimg.com/u/f70/17/17/86/62/kisspn11.png" />');
});
});
</script>
<script type="text/javascript">
$(window).load(function() {
$(".rep-button").each(function() {
$(this).find("i.ion-thumbsdown").html('<img src="https://i.servimg.com/u/f45/15/36/45/50/funny-10.png" />');
});
});
</script>
ثم ضع الكود التالي بالجفا واختار المواضيع
CODE
$(function() {
// General Configuration of the plugin
var config = {
position_left : true, // true for left || false for right
negative_vote : true, // true for negative votes || false for positive only
vote_bar : true, // display a small bar under the vote buttons
// button config
icon_plus : '',
icon_minus : '',
// language config
title_plus : 'التفاعل مع المساهمة',
title_minus : 'التفاعل مع المساهمة',
title_like_singular : '%{VOTES} التفاعل مع المساهمة',
title_like_plural : '%{VOTES} التفاعل مع المساهمة ',
title_dislike_singular : '%{VOTES} التفاعل مع المساهمة ',
title_dislike_plural : '%{VOTES} التفاعل مع المساهمة ',
title_vote_bar : '%{VOTES} التفاعل مع المساهمة'
},
// function bound to the onclick handler of the vote buttons
submit_vote = function() {
var next = this.nextSibling, // the counter next to the vote button that was clicked
box = this.parentNode,
bar = box.getElementsByTagName('DIV'),
vote = box.getElementsByTagName('A'),
mode = /eval=plus/.test(this.href) ? 1 : 0,
i = 0, j = vote.length, pos, neg, percent;
// submit the vote asynchronously
$.get(this.href, function() {
next.innerHTML = +next.innerHTML + 1; // add to the vote count
next.title = next.title.replace(/(\d+)/, function(M, $1) { return +$1 + 1 });
pos = +vote[0].nextSibling.innerHTML;
neg = vote[1] ? +vote[1].nextSibling.innerHTML : 0;
percent = pos == 0 ? '0%' : pos == neg ? '50%' : Math.round(pos / (pos + neg) * 100) + '%';
if (bar[0]) {
bar[0].style.display = '';
bar[0].firstChild.style.width = percent;
box.title = box.title.replace(/\d+\/\d+/, pos + '/' + ( pos + neg )).replace(/\(\d+%\)/, '(' + percent + ')');
}
});
// revoke voting capabilities on the post once the vote is cast
for (; i < j; i++) {
vote[i].href = '#';
vote[i].className = vote[i].className.replace(/fa_voted fa_plus/, 'fa_positive');
vote[i].onclick = function() { return false };
}
return false;
},
vote = $('.vote'), i = 0, j = vote.length,
version = $('.bodylinewidth')[0] ? 0 :
document.getElementById('phpbb') ? 1 :
$('.pun')[0] ? 2 :
document.getElementById('ipbwrapper') ? 3 :
document.getElementById('modernbb') ? 4 :
'badapple', // version check
// version data so we don't have to redefine these arrays during the loop
vdata = {
tag : ['SPAN', 'LI', 'SPAN', 'LI', 'LI'][version],
name : [version],
actions : ['.post-options', '.fa_like_div', '.post-options', '.posting-icons', '.fa_like_div'][version]
},
post, plus, minus, n_pos, n_neg, title_pos, title_neg, li, ul, bar, button, total, percent, span, pseudo, vote_bar; // startup variables for later use in the loop
// prevent execution if the version cannot be determined
if (version == 'badapple') {
if (window.console) console.warn('This plugin is not optimized for your forum version. Please contact the support for further assistance.');
return;
}
for (; i < j; i++) {
post = $(vote[i]).closest('.post')[0];
bar = $('.vote-bar', vote[i])[0]; // vote bar
button = $('a[href*="p_vote"]', vote[i]); // plus and minus buttons
pseudo = $(vdata.name, post).text() || 'MISSING_STRING'; // username of the poster
ul = $(vdata.actions, post)[0]; // post actions
li = document.createElement(vdata.tag); // vote system container
li.className = 'fa_reputation';
if (li.tagName == 'SPAN') li.style.display = 'inline-block';
// calculate votes
if (bar) {
total = +bar.title.replace(/.*?\((\d+).*/, '$1');
percent = +bar.title.replace(/.*?(\d+)%.*/, '$1');
n_pos = Math.round(total * (percent / 100));
n_neg = total - n_pos;
} else {
n_pos = 0;
n_neg = 0;
}
// set up negative and positive titles with the correct grammar, votes, and usernames
title_pos = (n_pos == 1 ? config.title_like_singular : config.title_like_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_pos);
title_neg = (n_neg == 1 ? config.title_dislike_singular : config.title_dislike_plural).replace(/%\{USERNAME\}/g, pseudo).replace(/%\{VOTES\}/g, n_neg);
// define the vote counts
li.innerHTML = '<span class="fa_voted fa_plus" title="' + title_pos + '">' + n_pos + '</span>' + (config.negative_vote ? ' <span class="fa_voted fa_minus" title="' + title_neg + '">' + n_neg + '</span>' : '');
span = li.getElementsByTagName('SPAN'); // get the vote count containers for use as insertion points
// create positive vote button
plus = document.createElement('A');
plus.href = button[0] ? button[0].href : '#';
plus.onclick = button[0] ? submit_vote : function() { return false };
plus.className = 'fa_vote' + (button[0] ? '' : 'd') + ' fa_plus';
plus.innerHTML = config.icon_plus;
plus.title = (button[0] ? config.title_plus : title_pos).replace(/%\{USERNAME\}/g, pseudo);
span[0] && li.insertBefore(plus, span[0]);
// create negative vote button
if (config.negative_vote) {
minus = document.createElement('A');
minus.href = button[1] ? button[1].href : '#';
minus.onclick = button[1] ? submit_vote : function() { return false };
minus.className = 'fa_vote' + (button[1] ? '' : 'd') + ' fa_minus';
minus.innerHTML = config.icon_minus;
minus.title = (button[1] ? config.title_minus : title_neg).replace(/%\{USERNAME\}/g, pseudo);
span[1] && li.insertBefore(minus, span[1]);
}
// create vote bar
if (config.vote_bar) {
vote_bar = document.createElement('DIV');
vote_bar.className = 'fa_votebar';
vote_bar.innerHTML = '<div class="fa_votebar_inner" style="width:' + percent + '%;"></div>';
vote_bar.style.display = bar ? '' : 'none';
li.title = config.title_vote_bar.replace(/%\{USERNAME\}/, pseudo).replace(/%\{VOTES\}/, n_pos + '/' + (n_pos + n_neg)).replace(/%\{PERCENT\}/, '(' + percent + '%)');
li.appendChild(vote_bar);
}
// finally insert the vote system and remove the default one
config.position_left ? ul.insertBefore(li, ul.firstChild) : ul.appendChild(li);
vote[i].parentNode.removeChild(vote[i]);
}
});
وطبعا كل واحد يقدر يغير الكلمات الموجوده بالازرار الى اي كلمة يريد
وكذا الصور تقدر تغيرهم من قالب المواضيع
انتهى الشرح
منقول
بالتوفيق للجميع
والسلام ختام
