Cara memasang tombol like di blog - Pada kesempatan kali ini blog firdaus akan memberikan sedikit tutorial cara memasang tombol like di blog anda.
Tombol like ini bukanlah tombol like jempol yang biasa banyak dipakai 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 instruksi ialah HTML, CSS, dan Javasricpt (berupa link javascript.js . Apa sehabis pemasangan tombol like ini dapat menciptakan blog aku 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 instruksi asikron sehingga dapat memperingan loading blog anda.
Bagaimana Cara Pemasangannya?
Sebelum melaksanakan hal ini ada baiknya anda memback up template anda terlebih dahulu semoga dapat dikembalikan lagi jikalau terjadi sesuatu yang tidak diinginkan.
- Login ke dashboard blogger anda
- Pilih tema --> edit HTML
- Langkah selanjutnya carilah instruksi <data:post.body/> (Gunakan CTRL+F untuk mempermudah pencarian. Kode tersebut niscaya lebih dari satu di template Anda, pilihlah instruksi yang letaknya berada diatas tombol social share yang letaknya berada dibawah postingan kemudian masukkan instruksi HTML berikut ini :
<div class='lovebutton-bloggerku' expr:data-id='data:blog.blogId + "_" + 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 instruksi CSS ini guna mempercantik tombol like yang akan dipasang. Taruh di atas instruksi ]]></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 instruksi </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 sekarang terlihat lebih manis dengan penambahan tombol like ini.
Keterangan : Semua instruksi diatas admin ambil dari blog bloggerku.com dengan sedikit modifikasi
Tips jikalau cara tersebut tidak work untuk blog anda
Hilangkan instruksi async='async' pada instruksi 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.
