Cara Mudah Memasang Tombol Like Di Bawah Postingan Blog

Baca Juga Artikel Berikut Ini

Cara memasang tombol like di blog - Pada kesempatan kali ini blog firdaus akan menyampaikan sedikit tutorial cara memasang tombol like di blog anda. 

Tombol like ini bukanlah tombol like jempol yang biasa banyak digunakan orang lain, tetapi tombol like dengan berbentuk love yang tentunya tidak kalah bagusnya dengan tombol like berbentuk jempol yang selama ini

Untuk pemasangan tombol like ini memerlukan 3 kode yaitu HTML, CSS, dan Javasricpt (berupa link javascript.js . Apa setelah pemasangan tombol like ini bisa membuat blog saya menjadi lemot?

Insyaallah tidak. Karena kode-kode HTML serta CSS yang ada pada tombol like ini telah admin kompress sehingga tidak memperberat loading blog. Selain itu link javasricpt juga diberi kode asikron sehingga bisa memperingan loading blog anda.

Bagaimana Cara Pemasangannya?

Sebelum melakukan hal ini ada baiknya anda memback up template anda terlebih dahulu agar bisa dikembalikan lagi jika terjadi sesuatu yang tidak diinginkan.

• Login ke dashboard blogger anda

• Pilih tema --> edit HTML

• Langkah selanjutnya carilah kode <data:post.body/> (Gunakan CTRL+F untuk mempermudah pencarian. Kode tersebut pasti lebih dari satu di template Anda, pilihlah kode yang letaknya berada diatas tombol social share yang letaknya berada dibawah postingan lalu masukkan kode HTML berikut ini :

<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='35' viewBox='0 0 1792 1792' width='35' 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>

• Masukka kode CSS ini guna mempercantik tombol like yang akan dipasang. Taruh di atas kode ]]></b:skin> atau </style>

.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 #32CEFF;display:inline-block;border-radius:50%;width:60px;height:60px;cursor:pointer;float:left;overflow:hidden;margin-right:10px}.lovebutton-bloggerku .icon{padding-top:10px}.lovebutton-bloggerku svg{fill:#32CEFF;transition:all 0.2s}.lovebutton-bloggerku a:hover svg{fill:#3038A8}.lovebutton-bloggerku a .active svg{fill:#F42B30}.lovebutton-bloggerku .total{line-height:50px;font-size:25px;display:inline}

• Terakhir, Masukkan Link Javasricpt Berikut dan taruh diatas kode </body>

<script async='async' src='https://script.bloggerku.com/like/1.0/script.min.js'type='text/javascript'/>

• Tekan Save

Kini anda berhasil memasang tombol like dibawah postingan.  Blog anda tentunya kini terlihat lebih cantik dengan penambahan tombol like ini.

Keterangan : Semua kode diatas admin ambil dari blog bloggerku.com dengan sedikit modifikasi 

Tips jika cara tersebut tidak work untuk blog anda

Hilangkan kode async='async' pada kode javascript tersebut. Karena tak semua template support dengan pemasangan script asikron.

Baca Juga : Cara Memasang Tombol Share WhatsApp

Sekian tutorial cara memasang tombol like dibawah postingan, semoga bermanfaat untuk pembaca sekalian.