The Best
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

The Bestدخول
●● إعلانـات ●●
اعلانك هنا كبير إعلانك هنا ديوان الإلكتروني
أفضل الاعضاء هذا الشهر
آخر المشاركات
أفضل الاعضاء هذا الشهر
315 المساهمات
239 المساهمات
114 المساهمات
110 المساهمات
53 المساهمات
45 المساهمات
39 المساهمات
30 المساهمات
25 المساهمات
23 المساهمات
آخر المشاركات





descriptiondefaultوضع صور في ازرار التقييم والاعجاب

more_horiz
السلام عليكم ورحمة الله,
ازرار التقييم والاعجاب بشكل جديد
وضع صور في ازرار التقييم والاعجاب  Zlsn9r10

كما تلاحظون في الصوره
ازرار اعجبني ولم يعجبني صار فيهم صور,
وزر التقييم الإيجابي صار لايك وعليه صورة ,
وزر التقييم السلبي صار دسلايك وعليه صورة,
------------------------------------------------

طريقة التركيب
اول شيء يجب ان تكون نسخة منتداك ModernBB
ثاني شيء يجب تفعيل نظام السمعة.
وكذلك تفعيل : نظام أعجبني ولم يعجبني


ثم اذهب الى التومبيلات والقوالب
ضع الكود التالي في اعلى قالب المواضيع 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 ? '&nbsp;<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
وفقكم الله

descriptiondefaultرد: وضع صور في ازرار التقييم والاعجاب

more_horiz
و عليكم السلام و رحمة الله و بركـاته

كود جميل جدا و يجعل المواضيع تشبه أكثر منشورات مواقع التواصل الاجتماعي

جزيل الشكر لك نوار ^^

وضع صور في ازرار التقييم والاعجاب  866468155


وضع صور في ازرار التقييم والاعجاب  H9R9IUO
وضع صور في ازرار التقييم والاعجاب  RT69Sre
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

[ أكآتسوكيـآت ] : مدونتي [ [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ] | معرضي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ] | متجـري [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ]  وضع صور في ازرار التقييم والاعجاب  866468155

descriptiondefaultرد: وضع صور في ازرار التقييم والاعجاب

more_horiz
سلمت يدآك على الطرح
بـ نتظـآر آلمزيد من هذا آلفيـض الراآقي
لك كل الود والاحترام

descriptiondefaultرد: وضع صور في ازرار التقييم والاعجاب

more_horiz
شكرآ لك


وضع صور في ازرار التقييم والاعجاب  Rt69sr10
وضع صور في ازرار التقييم والاعجاب  Untitl17
W W W . T H E B 3 S T . C O M
 
 KonuEtiketleri عنوان الموضوع
وضع صور في ازرار التقييم والاعجاب
 Konu Linki رابط الموضوع
 Konu BBCode BBCode
 Konu HTML Kodu HTML code
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى