Widget Like Post Artikel Blogger Pakai Firebase

Table of Contents +

• Widget Like Post Articel For Blogger 
• Membuat Database Realtame Di Firebase untuk Widget Like Post Blog

WIdget Like Postingan Arikel Blogger. Pada kesempatan kali ini saya akan membagikan sebuah artikel tentang bagaimana CARA MEMBUAT WIDGET LIKE POSTINGAN ARTIKEL DI BLOGGER.

Widget yang akan saya bagikan ini akan memiliki fungsi sebagai wadah tempat menampilkan jumlah orang yang menyukak artikel blog yang kamu posting.

Widget yang akan saya bagikan ini akan menggunakan api dari website countapi.xyz , namun sayang nya server website tersebut mengalami gangguan yang cukup parah. Namun jangan kuatir saya akan menggunakan alat milik google yaitu firebase realtame database untuk membuat widget like postingan artikel di blogger.

Keunggulan dari widget yang akan saya bagikan ini yaitu saya menggunakan lokalstorage sehingga pengunjung yang sudah memberikan like pada artikel gak bisa like berulang terus menerus.

Sebagai catatan widget ini hanya bisa untuk like post artikel blog. Sehingga pengunjung gak bisa melakukan unlike atau membatalkan like yang sudah di berikan.

Widget Like Post Articel For Blogger 

Seperti biasa sobat hallo langsung masuk saja ke edit html template blogger. Jangan lupa cadangkan terlebih dahulu template nya untuk antisipasi ada kesalahan saat sobat melakukan praktek editingnya.

BACA JUGA:Cara Sederhana Pasang Breadcrumb Di Blogger

Taruh kode css dibawah ini pada pengaturan code css template sobat. Disini saya gak perlu njelaskan lagi harus taruh dimana ya solv. Saya berharap sobat sudah faham harus meletakan kodenya dimana.

/* widget like shared by www.wendycode.com */

.wc-like-btn{position:relative;padding:20px 20px;background:#f89000;font-size:18px;border-radius:5px;color:#fff;outline:none;border:none;display:flex;align-items:center;justify-content:center;cursor:default}

.wc-like-btn::after{content:'';position:absolute;padding:20px 20px;background:#f89000;bottom:-15px;transform:rotate(45deg)}

.wc-like-btn svg{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:25px;height:25px;margin-right:5px;z-index:2}

.wc-like-btn svg.like{fill:#fff;stroke:#fff}

#wc-liked{margin-top:5px;z-index:2}

#wc-liked::before{content:attr(data-klik)}

#wc-liked::after{content:attr(data-teks);margin-left:5px}

.wrap-center{display:flex;justify-content:center}

Langkah berikutnya sobat cari kode <data:post.body/> atau jika sobat menggunakan template median ui , plus ui ,dan lentaro plus ui seperti yang saya gunakan. Sobat bisa mencari kode <b:include data='post' name='postBody'/>  lalu letakan kode yang saya berikan di bawah tepat di bawahnya.

<div class="wrap-center">

<button class="wc-like-btn" expr:data-like="data:blog.blogId + &quot;/&quot; + data:post.id + &quot;/likepost&quot;">

<svg viewBox="0 0 24 24"><path d="M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z" /></svg>

<span id="wc-liked" data-klik="0" data-teks="Like" data-after="Liked"></span>

</button>

</div>

BACA JUGA:Membuat Thumbnail Blog Pakai Canva Tanpa Hak Cipta

<script>

/*<![CDATA[*/

const wcLikeFbase = {

  firebaseUrl: 'https://choipan-wendy-default-rtdb.firebaseio.com/',

  abbreviation: '1',  // 0 or 1 or 2

  sharedBy: 'www.wendycode.com' // credit

};

function likePostLoad(){var script=document.createElement('script');script.async= true;script.src='https://cdn.wendycode.com/blogger/widget/like.js';document.body.appendChild(script)}function vcDtcLzy(){likePostLoad(),localStorage.setItem("likePostJs","true")}var wcLdStorage=localStorage.getItem("likePostJs");if("true"!=wcLdStorage){var t=!1,e=!1;window.addEventListener("scroll",()=>{(0!=document.documentElement.scrollTop&&!1===t||0!=document.body.scrollTop&&!1===t)&&(vcDtcLzy(),t=!0,e=!0)},!0),window.addEventListener("click",()=>{!1===e&&!1===e&&(vcDtcLzy(),e=!0,t=!0)},!0)}"true"===wcLdStorage&&likePostLoad();

/*]]>*/</script>

firebaseUrl: kamu isi dengan url firebase realtime databse milik kalian atau biarkan menggunakan database milik kami

BACA JUGA:Membuat Multi Tabs Pils Navigation Mobile Di Blogger

- abbreviation: isi dengan angka 0 atau 1 atau 2, kamu bisa melihat perbedaannya jika viewcount telah mencapai di atas angka 1000

Membuat Database Realtame Di Firebase untuk Widget Like Post Blog

Langkah berikutnya sobat harus mendapatkan url seperti yang ada di code script yaitu contohnya seperti ini https://choipan-wendy-default-rtdb.firebaseio.com/. Untuk mendapatkanya kalian harus membuat proyek di faribase realtame database.

BACA JUGA:mengapa artikel blog igniel selalu rank one

Namun jika kamu males dengan hal hal yang ribet. Kamu bisa menggunakan url database kami saja. Namun disini saya menganjurkan kamu untuk menggunakan database sendiri. Karena menurut info yang saya baca di https://firebase.google.com/docs/database/usage/limits?hl=id database versi gratis ada limitnya.

Karena takutnya url database yang saya bagikan ini banyak yang menggunakan. Maka otomatis akan terkena limit. Sehingga widget like post artikel blog tidak akan berfungsi dengan baik.

Nah untuk tutorial lengkap mengenai cara membuat database realtame widget like post di blogger menggunakan firebase kamu bisa membaca artikel selengkapnya di website wendycode.com atau kamu bisa mengklik judul artikel dibawah ini :

Membuat Widget Like Post Artikel Di Blogger Menggunakan Firebase Realtame Database By WendyCode.Com