Memasang Asynchronous Pin It Button Di Blog

Memasang Asynchronous Pin It Button
Apakah Anda memiliki blog galeri seperti galeri foto petualangan Anda, galeri foto makanan dan masakan favorite Anda, atau mungkin galeri foto traveling Anda? Jika Anda memiliki blog galeri foto, salah satu widget yang mesti dipasang adalah 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 saya akan share cara memasang Pin It Button dengan asynchronous yang muncul ketika pengunjung meng-hover gambar atau fotonya. Tombol ini akan muncul di semua gambar di blog kecuali gambar yang memiliki size di bawah 80px X 80px, gambar yang digunakan sebagai background dengan CSS, atau gambar yang tampil dengan menggunakan kode data:src pada kode html-nya.

Sebenarnya caranya cukup mudah, Anda tinggal masuk ke widget builder di developer Pinterest dengan memilih type button dengan image hover dan meng-copy kode yang diberikan. Namun yang menjadi masalah yaitu ketika akan save template terdetek error pada kodenya. Error ini muncul dari kode async pada kode 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 kode ="async" sehingga menjadi seperti 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 kode </body>.

Kode di atas memunculkan gambar tombol Pin It yang agak besar, jika Anda menginginkan gambar tombolnya lebih kecil, silahkan hapus kode data-pin-height="28" sehingga menjadi seperti 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>

Mudah bukan...? Dengan menggunakan asynchronous pada javascriptnya, menjadikan 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 ketika dihover, silahkan tambahkan atribut data-pin-no-hover="true" pada kode html gambarnya seperti di bawah ini.


<img alt="gambar" src="http://3.bp.blogspot.com/-oxlW0p4dVMw/UtkwFsBCnII/AAAAAAAAa8w/B6BTrmOaHGI/s1600/1.png" height="200" title="Cagar Alam Pananjung" width="300" data-pin-no-hover="true"/>

Jangan khawatir, dengan penambahan kode data-pin-no-hover="true" pada kode html gambar ini tidak akan menyebabkan gambar menjadi error pada validasi HTML5.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments