إضافة زر إعجاب للمواضيع

بالفعل، منذ اشهر لم أقم بتحديث المدونة بتدوينة جديدة رغم ان هناك الكثير من كل شيء اود ان اقدمه لكم لكن ضيق الوقت لا يساعدني 🐑 فعيد مبارك على الجميع
سأشارككم اضافة رائعة خاصة طبعا بقوالب بلوجر تتمثل في وضع زر اعجاب على شكل قلب للمواضيع سيضيف لمسة جميلة وفرصة للزوار للإعجاب بما قدمته وهي فرصة ايضا لصاحب الموقع كتحفيز.
تدوينة مشابهة : إضافة التقييمات بشكل نجوم ولايكات للموضوع

معاينة

شرح طريقة التركيب

1. قم بتحرير القالب وابحث عن هذا الكود </b:skin> بالاستعانة بـ Ctrl+F
2. ضع الكود التالي فوقه

 .lovebutton-bloggerku { width: 100%; display: inline-block; text-align: center; margin: 20px 0; } .lovebutton-bloggerku .inner { text-align: center; display: inline-table; } .lovebutton-bloggerku a { background: #fff; border: 1px solid #aaa; display: inline-block; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; float: left; overflow: hidden; margin-right: 10px; } .lovebutton-bloggerku .icon { padding-top: 13px; } .lovebutton-bloggerku svg { fill: #aaa; transition: all 0.2s; } .lovebutton-bloggerku a:hover svg { fill: #666; } .lovebutton-bloggerku a .active svg { fill: #F44336; } .lovebutton-bloggerku .total { line-height: 50px; font-size: 20px; display: inline; }

3. ابحث عن هذا الكود <data:post.body/> ستجده متكرر الثاني هو المقصود ثم ضع الكود الآتي إما فوقه أو أسفله بحيث إن وضعته فوقه ستظهر تحت العنوان أما إذا وضعته أسفله ستظهر اسفل نهاية الموضوع

 <div class='lovebutton-bloggerku' expr:data-id='data:blog.blogId + &quot;_&quot; + data:post.id'>
    <div class='inner'>
        <a href='javascript:;'>
            <div class='icon'>
                <svg height='25' viewBox='0 0 1792 1792' width='25' xmlns='http://www.w3.org/2000/svg'><path d='M896 1664q-26 0-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z'/></svg>
            </div>
        </a>
        <div class='total'>جاري التحميل</div>
        <div style='clear:both;'/>
    </div>
</div>

4. ابحث عن هذا الكود </body> وضع الكود التالي فوقه

 
<script src='https://rawgit.com/iHussam/ar1web/master/lovely.js' type='text/javascript'/>

إضافة زر إعجاب للمواضيع

معلومات عن التدوينة

احدث التعليقات

الاكثر زيارة

الصفحات

متابعينا الاوفياء