شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي

اضافة خاصية الإعجاب بالمواضيع والمساهمات

avatar
عضو جديد
الجنس : ذكر

السرطان

عدد المساهمات : 12

نقاط النشاط : 29

السٌّمعَة : 11

بلد العضو :

العمر : 22

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في السبت فبراير 20, 2016 3:24 pm
  • تقييم المساهمة: 100% (1)
تذكير بمساهمة فاتح الموضوع :

اضافة خاصية إعجاب للمواضيع والمساهمات داخل المنتدى



ندخل الى الشرح مباشرة بدون مقدمات 


اضافة كود CSS



من لوحة التحكم نتوجة الى المظهر ومن ثم الى الالوان ومن ثم الى ورقة تصميم CSS 
ونقوم بإضافة الكود التالي

الكود:
.fa_vote, .fa_voted, .fa_count {  font-size:12px;  font-family:Verdana, Arial, Helvetica, Sans-serif;  display:inline-block !important;  width:auto !important;  transition:300ms;} .fa_voted, .fa_vote:hover { opacity:0.4 }.fa_voted { cursor:default } .fa_count {  font-weight:bold;  margin:0 3px;  cursor:default;} .fa_positive { color:#4A0 }.fa_negative { color:#A44 } .fa_votebar, .fa_votebar_inner {  background:#C44;  height:3px;} .fa_votebar_inner {  background:#4A0;  transition:300ms;}


إضافة كود الجافا سكريبت



من لوحة التحكم نتوجهة الى عناصر اضافية ومن ثم الى إدارة أكواد Javascript
إنشاء كود جديد في حقل العنوان * : اضف اي اسم تريدية 
وفي أضف الكود الى : جميع الصفحات 




الكود:
$(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 : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/plus10.png" alt="+"/>',    icon_minus : '<img src="http://i18.servimg.com/u/f18/18/21/41/30/minus10.png" alt="-"/>',       // language config    title_plus : 'Like %{USERNAME}\'s post',    title_minus : 'Dislike %{USERNAME}\'s post',       title_like_singular : '%{VOTES} person likes %{USERNAME}\'s post',    title_like_plural : '%{VOTES} people like %{USERNAME}\'s post',       title_dislike_singular : '%{VOTES} person dislikes %{USERNAME}\'s post',    title_dislike_plural : '%{VOTES} people dislike %{USERNAME}\'s post',       title_vote_bar : '%{VOTES} people liked %{USERNAME}\'s post %{PERCENT}'  },            // 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_vote/, 'fa_voted');      vote[i].onclick = function() { return false };    }       return false;  },       vote = $('.vote'), i = 0, j = vote.length,  version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : 'badapple', // version check   // version data so we don't have to redefine these arrays during the loop  vdata = {    tag : ['SPAN', 'LI', 'SPAN', 'LI'][version],    name : ['.name', '.postprofile dt > strong', '.username', '.popmenubutton'][version],    actions : ['.post-options', '.profile-icons', '.post-options', '.posting-icons'][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]).parentsUntil('.post').parent()[0];    bar = $('.vote-bar', vote[i])[0]; // vote bar    button = $('.vote-button', 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_count fa_positive" title="' + title_pos + '">' +n_pos + '</span>' + (config.negative_vote ? '&nbsp;<span class="fa_count fa_negative" 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].firstChild.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].firstChild.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]);  }});





بذالك تكون قد انتهيت من اضافة كود الإعجاب بالمواضيع والمساهمات

رد: اضافة خاصية الإعجاب بالمواضيع والمساهمات

زائر
زائر
تمت المشاركة في الثلاثاء مايو 17, 2016 7:59 pm
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي

رد: اضافة خاصية الإعجاب بالمواضيع والمساهمات

avatar
عضو جديد
الجنس : ذكر

عدد المساهمات : 23

نقاط النشاط : 55

السٌّمعَة : 10

بلد العضو :

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الإثنين يونيو 27, 2016 5:42 pm
ممكن طريقة اضافته للتومبيلات لان اكواد الجافا مملوءة لا تعمل

رد: اضافة خاصية الإعجاب بالمواضيع والمساهمات

avatar
عضو جديد
الجنس : ذكر

عدد المساهمات : 74

نقاط النشاط : 175

السٌّمعَة : 2

بلد العضو :

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الجمعة يوليو 08, 2016 10:47 pm
لم يعمل معي ):"

رد: اضافة خاصية الإعجاب بالمواضيع والمساهمات

avatar
بصمة خالدة
الجنس : ذكر

السمك

عدد المساهمات : 11054

نقاط النشاط : 11867

السٌّمعَة : 70

بلد العضو :

العمر : 22

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الثلاثاء يوليو 12, 2016 11:43 pm
شكر جزيلا للطرح القيم
ننتظر المزيد من ابداع مواضيعك الرائعة
تحياتي وتقديري لك
@CLARO@
التوقــيـــــــــــــــــــــع

رد: اضافة خاصية الإعجاب بالمواضيع والمساهمات

زائر
زائر
تمت المشاركة في السبت أغسطس 27, 2016 6:01 pm

كود جميل شكرا لك

رد: اضافة خاصية الإعجاب بالمواضيع والمساهمات

avatar
عضو خبير
الجنس : ذكر

الجدي

عدد المساهمات : 1432

نقاط النشاط : 1522

السٌّمعَة : 34

بلد العضو :

العمر : 100

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في السبت أغسطس 27, 2016 8:55 pm

كوددد جميل
شكككرآ ~

التوقــيـــــــــــــــــــــع

رد: اضافة خاصية الإعجاب بالمواضيع والمساهمات

زائر
زائر
تمت المشاركة في الأربعاء سبتمبر 14, 2016 11:36 pm
شكرااا

كود رائع

رد: اضافة خاصية الإعجاب بالمواضيع والمساهمات

avatar
مؤسس الابداع العربي
الجنس : انثى

السمك

عدد المساهمات : 124413

نقاط النشاط : 139765

السٌّمعَة : 2911

بلد العضو :

العمر : 31



معاينة صفحة البيانات الشخصي للعضوhttp://taqnyiat.ahlamontada.com/
تمت المشاركة في السبت يناير 28, 2017 11:45 pm
#تقنية_تكويد
#تعلم_تكويد
#برمجه_احلى_منتدى
#طور_منتداك
يعطيك العافية على العطاء
 واصل تالقك
التوقــيـــــــــــــــــــــع



رد: اضافة خاصية الإعجاب بالمواضيع والمساهمات

avatar
عضو فعال
الجنس : ذكر

القوس

عدد المساهمات : 633

نقاط النشاط : 716

السٌّمعَة : 38

بلد العضو :

العمر : 20

معاينة صفحة البيانات الشخصي للعضوhttp://egyptian-cafe.123.st/
تمت المشاركة في الإثنين يناير 30, 2017 11:44 am

شكر جزيلا للطرح القيم

ننتظر المزيد من ابداع مواضيعك الرائعة
تحياتي
وتقديري لك
#Duce
التوقــيـــــــــــــــــــــع

رد: اضافة خاصية الإعجاب بالمواضيع والمساهمات

avatar
بصمة خالدة
الجنس : انثى

الدلو

عدد المساهمات : 9529

نقاط النشاط : 11706

السٌّمعَة : 23

بلد العضو :

العمر : 54

معاينة صفحة البيانات الشخصي للعضوhttp://www.manssora.com/
تمت المشاركة في الإثنين يناير 30, 2017 2:33 pm
كود مميز شكرا
التوقــيـــــــــــــــــــــع

رد: اضافة خاصية الإعجاب بالمواضيع والمساهمات

avatar
بصمة خالدة
الجنس : ذكر

السمك

عدد المساهمات : 22315

نقاط النشاط : 23052

السٌّمعَة : 79

بلد العضو :

العمر : 16

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الجمعة فبراير 17, 2017 1:51 pm
يعطيك العافية
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى