مدونة معاون

إضافة زر إعجاب للمواضيع على شكل قلب في بلوجر

اضافات بلوجر لا تنتهي بطبيعة الحال فكل شيء متوقف عليك في اطلاق خيالك وتصميم اي شيء تريده، وفي هذه التدوينة سنقد م لكم طريقة لإضافة زر إعجاب للمواضيع او التدوينات يظهر على شكل قلب (طبعا يمكنك تغييره الى اي شكل تريده فقط يجب ان تكون على دراية بسيطة بـ html) حتى لا نطيل تابع معنا كيفية تركيب.

إضافة زر إعجاب للمواضيع على شكل قلب في بلوجر

كيفية إضافة زر إعجاب للتدوينات في بلوجر:

- قبل تركيب توجه الى هذا الرابط لمعاينة اضافة.

- من لوحة تحكم مدونتك ثم المظهر بعدها اتجه الى تحرير html وابحث عن الوسم التالي.

</b:skin>

بعد ايجاده ضع فوقه الكود التالي.

.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;}

- اعد البحث عن الكود التالي.

<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>

- اعد البحث مرة آخرى عن الوسم التالي.

</body>

بعد ايجاده ضع فوقه الكود التالي.

<script type='text/javascript'>//<![CDATA[

!function(){Array.prototype.remove=function(){for(var e,t,i=arguments,o=i.length;o&&this.length;)for(e=i[--o];-1!==(t=this.indexOf(e));)this.splice(t,1);return this};var e=document.createElement("script");e.src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js",e.onload=function(){firebase.initializeApp({apiKey:"AIzaSyD_MvMvRLs8CqwZ2k4c-Seic5ZBr2D1Zw8",databaseURL:"https://bloggerku-com.firebaseio.com",projectId:"bloggerku-com"}),function(e){for(var t=document.getElementsByClassName("lovebutton-bloggerku"),i=0,o=t[i];i<t.length;i++){var a=o.getAttribute("data-id"),r=JSON.parse(localStorage.getItem("liked"))||[],c=0;e.ref("like/"+a+"/total").on("value",function(e){-1!==r.indexOf(a)&&o.querySelector(".icon").classList.add("active"),c=e.val()||0,o.querySelector(".total").innerText=c}),o.querySelector("a").addEventListener("click",function(){o.querySelector(".icon").classList.toggle("active"),o.querySelector(".icon").classList.contains("active")?(r.push(a),localStorage.setItem("liked",JSON.stringify(r)),c++):(r.remove(a),localStorage.setItem("liked",JSON.stringify(r)),c--),e.ref("like/"+a+"/total").set(c)})}}(firebase.database())},document.body.append(e)}();

//]]></script>

الان قم بحفظ المظهر بعدها توجه الى اسفل اي تدوينة وشاهد زر اعجاب الذي يظهر على شكل قلب رمادي وعند ضغط عليه يتحول الى اللون احمر.