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

عدد المشاهدات الان

 البحث عن

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

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

https://bloggerku-com.firebaseio.com

https://www.gstatic.com/firebasejs/4.9.0/firebase.js

وسلامتكم

اذا حبيت نسخ المقالهـ