Memasang Asynchronous Pin It Button Di Blog
Apakah Anda mempunyai blog galeri menyerupai galeri foto petualangan Anda, galeri foto kuliner dan kuliner favorite Anda, atau mungkin galeri foto traveling Anda? Jika Anda mempunyai blog galeri foto, salah satu widget yang mesti dipasang yakni Pin It Button atau tombol Pin It.
Dengan Pin It Button atau tombol Pin It memudahkan pengunjung blog untuk mengirimkan foto-foto Anda ke Pinterest sebagai foto favorite mereka.
Nah kali ini aku akan share cara memasang Pin It Button dengan asynchronous yang muncul dikala pengunjung meng-hover gambar atau fotonya. Tombol ini akan muncul di semua gambar di blog kecuali gambar yang mempunyai size di bawah 80px X 80px, gambar yang dipakai sebagai background dengan CSS, atau gambar yang tampil dengan memakai kode data:src pada arahan html-nya.
Sebenarnya caranya cukup mudah, Anda tinggal masuk ke widget builder di developer Pinterest dengan menentukan type button dengan image hover dan meng-copy arahan yang diberikan. Namun yang menjadi duduk perkara yaitu dikala akan save template terdetek error pada kodenya. Error ini muncul dari arahan async pada arahan di bawah ini.
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
Untuk mengatasinya Anda cukup menambahkan arahan ="async" sehingga menjadi menyerupai di bawah ini.
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async="async" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
Kemudian silahkan simpan di atas arahan </body>.
Kode di atas memunculkan gambar tombol Pin It yang agak besar, jikalau Anda menginginkan gambar tombolnya lebih kecil, silahkan hapus arahan data-pin-height="28" sehingga menjadi menyerupai di bawah ini.
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async="async" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
Praktis bukan...? Dengan memakai asynchronous pada javascriptnya, mengakibatkan tombol Pin It ini tidak menghambat loading blog. Silahkan coba sorotkan mouse Anda pada gambar-gambar di halaman demonya.
Jika ada gambar yang tidak ingin muncul tombol Pin It ini dikala dihover, silahkan tambahkan atribut data-pin-no-hover="true" pada arahan html gambarnya menyerupai di bawah ini.
<img alt="Memasang Asynchronous Pin It Button Di Blog Memasang Asynchronous Pin It Button Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhShbz_3vGJNcGtZw3PH_vRaQRxWepI5QQKrSLvP_xVpff96_jcOagNpM5us9O9GMXrNjPDjSYI55VC54_bL2an613UqT5gmZWIxUfLiYaP9kLbKSr_CbgnjIE0H0xUGokdEPaR2wBm3ICD/s1600/1.png" height="200" title="Memasang Asynchronous Pin It Button Di Blog" width="300" data-pin-no-hover="true"/> Jangan khawatir, dengan penambahan arahan data-pin-no-hover="true" pada arahan html gambar ini tidak akan menimbulkan gambar menjadi error pada validasi HTML5.
Sumber https://www.kompiajaib.com/
0 Response to "Memasang Asynchronous Pin It Button Di Blog"
Posting Komentar