Cara Memasang Tombol Pinterest pada Semua Gambar di Blogger

Tahu Pinterest? Saya anggap sudah tahu :D Tahu bagaimana memasang tombol Pinterest di postingan Blogger? Sudah, kan sudah banyak yang membahas. Nah, bagaimana cara memasang tombol Pinterest pada semua gambar di postingan Blogger? Ini yang mungkin belum pada tahu (atau yang kudet?).

Begini, ini adalah cara resmi yang diluncurkan Pinterest pada tanggal 7 Oktober kemarin. Hanya dengan memasang sedikit kode javascript, tanpa menambah HTML apapun, tombol Pin it akan muncul tiap kali Anda mengarahkan kursor (hovering) pada gambar yang berada di dalam postingan.

Iya, dengan memasang tombol Pin it di blog Anda, pengunjung akan semakin mudah untuk membagikan gambar di Pinterest (cocok untuk blog bertema fotografi dan sejenisnya) Silakan lihat demo dari hasil pemasangan tombol Pin it di blog Fakta4 kemudian ikuti tutorial berikut ini.

Sudah pernah memasang tombol Pinterest sebelumnya? Silakan cari dulu kode-kode berikut di template Anda dan tambahkan kode yang diperlukan.

Silakan buka template Anda, cari kode berikut (atau yang mirip) <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Selanjutnya tambahkan atribut data-pin-hover sehingga menjadi seperti ini

<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

Bila Anda memakai script asynchronous, cukup tambahkan atribut ini p.setAttribute('data-pin-hover', true); sehingga hasil akhirnya menjadi seperti ini.

<script type="text/javascript">
(function(d){
  var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
  p.type = 'text/javascript';
  p.setAttribute('data-pin-hover', true);
  p.async = true;
  p.src = '//assets.pinterest.com/js/pinit.js';
  f.parentNode.insertBefore(p, f);
}(document));
</script>

Bila Anda belum pernah memasang tombol Pinterest sebelumnya, tambahkan salah satu (iya, salah satu aja) kode yang berada dalam kotak bertanda hijau di atas dan letakkan sebelum kode </head>, lalu simpan template Anda.

Sebagai catatan, tombol Pin it tidak akan muncul pada gambar background (yang diatur menggunakan CSS), gambar yang berukuran kurang dari 80 x 80 px, dan gambar yang memiliki atribut data-pin-no-hover="true", nopin="nopin", dan gambar dengan atribut src yang dimulai dengan data:

Selamat mencoba :)