ازرار التقييم والاعجاب بشكل جديد لنسخة ModernBB
صفحة 1 من اصل 1
ازرار التقييم والاعجاب بشكل جديد لنسخة ModernBB
السلام عليكم ورحمة الله,
ازرار التقييم والاعجاب بشكل جديد
كما تلاحظون في الصوره
ازرار اعجبني ولم يعجبني صار فيهم صور,
وزر التقييم الإيجابي صار لايك وعليه صورة ,
وزر التقييم السلبي صار دسلايك وعليه صورة,
و ازرار التقييم لا تظهر في مساهماتك . تظهر لك في مساهمات الاعضاء الاخرين بمعنى انك لا تستطيع تقييم نفسك,
وازرار اعجبني ولم يعجبني تظهر للجميع
------------------------------------------------
طريقة التركيب
ازرار اعجبني ولم يعجبني صار فيهم صور,
وزر التقييم الإيجابي صار لايك وعليه صورة ,
وزر التقييم السلبي صار دسلايك وعليه صورة,
و ازرار التقييم لا تظهر في مساهماتك . تظهر لك في مساهمات الاعضاء الاخرين بمعنى انك لا تستطيع تقييم نفسك,
وازرار اعجبني ولم يعجبني تظهر للجميع
------------------------------------------------
طريقة التركيب
اول شيء يجب ان تكون نسخة منتداك ModernBB
ثاني شيء يجب تفعيل نظام السمعة.
وكذلك تفعيل : نظام أعجبني ولم يعجبني
ثم اذهب الى التومبيلات والقوالب
ضع الكود التالي في اعلى قالب المواضيع viewtopic_body
ثم ضع الكود التالي بالجفا واختار المواضيع
وطبعا كل واحد يقدر يغير الكلمات الموجوده بالازرار الى اي كلمة يريد
وكذا الصور تقدر تغيرهم من قالب المواضيع
ثاني شيء يجب تفعيل نظام السمعة.
وكذلك تفعيل : نظام أعجبني ولم يعجبني
ثم اذهب الى التومبيلات والقوالب
ضع الكود التالي في اعلى قالب المواضيع viewtopic_body
- الكود:
<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>
ثم ضع الكود التالي بالجفا واختار المواضيع
- الكود:
$(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]);
}
});
وطبعا كل واحد يقدر يغير الكلمات الموجوده بالازرار الى اي كلمة يريد
وكذا الصور تقدر تغيرهم من قالب المواضيع
----------------------
تم عمل هذه الميزة بواسطة كونان2000,
وتم استعمال كود الجافا الخاص بالعضو Ange Tuteur,
وتم تغير الاوسمة بكود الجافا بواسطة كونان2000
keko_ferkeko, MostWanted, abigan, امير صغير, العراقي الطائي, أفندينا و اسراء حدلوج يعجبهم هذا الموضوع
مواضيع مماثلة
» متى سيتم فتح التومبيلات لنسخة modernbb ؟
» شكل جديد لشكل المواضيع لنسخة AwesomeBB
» المظهر العادي و الداكن لنسخة ModernBB
» حصريا : كود لعرض المواضيع و الردود تماما كـ منتديات الـ vb - خاص لنسخة ModernBB
» كود نافبار المشاركات والمواضيع التي لم يرد عنها بشكل ازرار بلونين 2012
» شكل جديد لشكل المواضيع لنسخة AwesomeBB
» المظهر العادي و الداكن لنسخة ModernBB
» حصريا : كود لعرض المواضيع و الردود تماما كـ منتديات الـ vb - خاص لنسخة ModernBB
» كود نافبار المشاركات والمواضيع التي لم يرد عنها بشكل ازرار بلونين 2012
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى