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

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

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]);  }});





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

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

زائر
زائر
تمت المشاركة في السبت فبراير 20, 2016 4:31 pm
كود احترافي ورائع ومرغوب فيه
طرحت فأبدعت يعطيك الف عافية
جهود مبارك جزاك الله خير
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير

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

avatar
رئاسة فريق التكويد
الجنس : ذكر

الميزان

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

نقاط النشاط : 246

السٌّمعَة : 38

بلد العضو :

العمر : 21

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الجمعة فبراير 26, 2016 2:04 pm
كود احترافي ورائع ومرغوب فيه
التوقــيـــــــــــــــــــــع

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

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

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

نقاط النشاط : 988

السٌّمعَة : 24

بلد العضو :

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الجمعة فبراير 26, 2016 3:14 pm
الله يعطيك العافيه
ابدعت في انتقاء الطرح 
اشكرك على جمالية نقلك الراقي 
تألقت بروعة موضوعك 
ننتظرابداعك بكل شوق
تحياتي وتقديري وردة حمراء
التوقــيـــــــــــــــــــــع



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

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

الاسد

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

نقاط النشاط : 26540

السٌّمعَة : 90

بلد العضو :

العمر : 37

معاينة صفحة البيانات الشخصي للعضوhttps://www.ibda3araby.com/
تمت المشاركة في الأحد فبراير 28, 2016 8:06 am

جزآك آلمولٍى خٍيُرٍ " .. آلجزآء .. "
و ألٍبًسِك لٍبًآسَ 
" آلتًقُوِىَ "وً " آلغفرآنَ "
وً جَعُلكٍ مِمَنً يٍظَلُهمَ آلله فٍي يٍومَ لآ ظلً إلاٍ ظله .~
وً عٍمرً آلله قًلٍبًك بآلآيمٍآنَ .~
علًىَ طرٍحًك آلًمَحِمًلٍ بنًفُحآتٍ إيمآنٍيهً .! 
يعطِيكْ العَآفيَةْ..

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

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

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

الجدي

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

نقاط النشاط : 1794

السٌّمعَة : 9

بلد العضو :

العمر : 19

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في السبت مارس 05, 2016 2:38 am
شكرا
التوقــيـــــــــــــــــــــع



                                
                     
                                



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

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

العذراء

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

نقاط النشاط : 10

السٌّمعَة : 10

بلد العضو :

العمر : 40

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الجمعة مارس 25, 2016 5:05 pm
شكرا

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

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

العذراء

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

نقاط النشاط : 510

السٌّمعَة : 16

بلد العضو :

العمر : 20

معاينة صفحة البيانات الشخصي للعضوhttp://forums.ephpbb.com
تمت المشاركة في الإثنين مارس 28, 2016 1:55 pm
تسلم ايدك يالغالي

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

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

الجدي

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

نقاط النشاط : 108

السٌّمعَة : 10

بلد العضو :

العمر : 2

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الإثنين مارس 28, 2016 2:02 pm
شكرا لك على الكود
التوقــيـــــــــــــــــــــع


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

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

تحياتــي
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
Propellerads                                                                           Propellerads