Teknologi

Cara Membuat Tombol Like Di Semua Postingan Pada Blog

Cara Membuat Tombol Like Di Semua Postingan Pada Blog

jumpa lagi dengan saya di Blog yang sederhana ini. Pada kesempatan kali ini kita akan belajar kembali tentang HTML pada Blog. Dan kali ini saya akan memberikan sebuah tips lagi, yaitu cara membuat tombol Like dibawah postingan Blog. Dengan kamu memasangnya tombol Like ini, kamu bisa mengetahui siapa saja pengunjung di Blog kamu yang menyukai Artikel yang kamu tulis dan kamu juga dapat mengetahui siapa saja yang merasa terbantu dengan apa yang kamu sampaikan pada artikel kamu.

Sebenarnya ada banyak jenis tombol Like yang bisa kita gunakan. Contohnya seperti tombol like fanspage Facebook. Kenapa saya tidak membuat tutorial cara membuat tombol like itu saja? Jawabannya adalah karena saya tahu, bahwa sobat juga tidak sepenuhnya memiliki FansPage Facebook. Maka dari itu saya hanya membuatkan tombol Like hanya untuk postingan Blog saja. Tapi kalau sobat mau request tutorial tersebut, kamu bisa komentar dibawah artikel ini.

Tombol Like yang akan kita pasang adalah dengan berbentuk hati. Dan tombol Like ini berfungsi untuk Like dan juga Unlike. Untuk cara pemasangannya, sama seperti biasanya. Kita akan menggunakan JavaScript pada HTML Blog sobat. Blogger

Gambar diatas adalah contoh tombol like yang akan kita pasang di Blog kita nantinya. Oke sobat Thalib, kita lanjut ke tutorialnya. Tapi sebelum lanjut ke langkah selanjutnya, alangkah baiknya kalau sobat Thalib untuk Subscribe terlebih dahulu Blog Rumah_Thalib ini, agar sobat selalu mendapatkan info terbaru dari Blog ini setiap harinya.

Cara Membuat Tombol Like/Suka Di Semua Postingan Blog :

1. Login terlebih dahulu ke akun Blogger sobat.

2. Seperti biasanya, kamu masuk ke menu Tema —> Edit HTML.

3. Kemudian cari kode ]]></b:skin>. Untuk memudahkan dalam pencarian, gunakan CTRL+F.

4. Jika Sudah dapat kode diatas, kemudian copy dan paste-kan kode dibawah ini Tepat diatas kode ]]>/b:skin>

.lovebutton-keneono { width: 100%; display: inline-block; text-align: center; margin: 20px 0; } .lovebutton-keneono .inner { text-align: center; display: inline-table; } .lovebutton-keneono 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-keneono .icon { padding-top: 13px; } .lovebutton-keneono svg { fill: #aaa; transition: all 0.2s; } .lovebutton-keneono a:hover svg { fill: #666; } .lovebutton-keneono a .active svg { fill: #F44336; } .lovebutton-keneono .total { line-height: 50px; font-size: 20px; display: inline; }

5. Jika kode diatas sudah di tempel, lanjut dengan kode berikut ini. Cari kode <data:post.body/> Kemudian lletakan kode dibawah ini tepat dibawah kode <data:post.body/>.

<div class=’lovebutton-keneono’ 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’>Loading</div> <div style=’clear:both;’/> </div> </div>
—> Keterangan : Kode <data:post.body/> akan ada di beberapa tempat {jumlahnya sekitar 2-3}. Silahkan coba sendiri. {Kalau saya menempelkannya di bagain yang ke 3}. <—
6. Kemudian cari kode yang bernama </body> {Biasanya kode ini ada dibagian paling bawah, sebelum tag </html>}. Dan tempel kode dibawah ini tepat diatas kode </body>.
 
<script src=’https://cdn.rawgit.com/dedi96/keneono/ff8c4db4/likescript.min.js’ type=’text/javascript’/>

7. kemudian Save atau Simpan HTML yang sudah di edit tadi. Dan lihat hasilnya!

Nah sobat Thalib, itulah cara memasang tomol Like dipostingan Blog. Sangat mudah bukan? Kamu hanya perlu menempelkan kode yang sudah saya berikan ke dalam Tema kamu. Jika masih ada kendala dalam proses pemasangan, silahkan bertanya-tanya di Kotak Komentar.

Anda mungkin juga suka...