Tips Blog: Memasang Pin it Button pada Tiap Gambar di Blogger

Tutorial cara memasang atau menambahkan Pin it button pada tiap gambar/image di postingan Blogger/Blogspot. Pada postingan sebelumnya saya sudah menjelaskan bagaimana cara menambahkan pin it button pada postingan, kali ini agak sedikit berbeda. Kalau pada tutorial sebelumnya tombol Pin it hanya tampil pada akhir postingan, kali ini bagaimana caranya setiap gambar mempunyai tombol pin it (Pin it button).

Tuorial ini sangat cocok bagi sobat yang suka share foto-foto, baik desain, wallpapper, theme, dan lain-lain, karena tidak usah memilih foto yang akan di Pin.

DEMO

Kode ini saya dapatkan dari Code it Pretty, akan tetapi harus mengaktifkan timestamp. Setelah melakukan sedikit perubahan pada script, akhirnya berjalan walaupun tanpa memengaktifkan timestamp.

Ada tiga langkah  mudah untuk menambahkan Pin it button pada tiap image, yaitu :
1. Menambahkan kode jQuery
2. Menambahkan kode JavaScript
3. Menambahkan kode CSS

Menambahkan jQuery

1. Login ke Blogger
2. Template > Edit HTML > Lanjutkan
3. Centang Expand Template Widget
4. Cari kode <b:skin>, tambahkan kode ini diatasnya :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Lewati langkah ini apabila template anda sudah mempunyai jQuery

Menambahkan JavaScript

Tambah kode ini sebelum </body>

<script type='text/javascript'>
 $().ready(function() {
  
 $(&#39;.entry-content img&#39;).each(function(){
  var $permalink = $(location).attr(&#39;href&#39;);
  $(this).wrap(&#39;&lt;div class=&quot;pinme&quot; style=&quot;&#39; + $(this).attr(&#39;style&#39;) + &#39;&quot; /&gt;&#39;).after(&#39;&lt;a href=&quot;http://pinterest.com/pin/create/button/?url=&#39; + $permalink + &#39;&amp;media=&#39; + $(this).attr(&#39;src&#39;) + &#39;&amp;description=&#39; + $(this).attr(&#39;alt&#39;) + &#39;&quot; class=&quot;pin-it-button&quot; count-layout=&quot;horizontal&quot;&gt;Pin It&lt;/a&gt;&#39;);
 });
 
});

(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement(&quot;script&quot;);
        s.type = &quot;text/javascript&quot;;
        s.async = true;
        s.src = &quot;http://assets.pinterest.com/js/pinit.js&quot;;
        var x = document.getElementsByTagName(&quot;script&quot;)[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent(&quot;onload&quot;, async_load);
    else
        window.addEventListener(&quot;load&quot;, async_load, false);
})();
</script>

Menambahkan kode CSS

Tambahkan kode ini sebelum ]]></b:skin>

.pinme iframe { display: block; margin: 0 auto; }

Deskripsi Photo

Untuk menambahkan deskripsi secara otomatis gunakan tag alt pada photo
Contoh:

<img alt="The Beatles WPAP Design" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLzGxD_CGNhDiE1WU_EQ-XFL4R-UsLRT-tOrgUvjPYDpVHGrivaVE7o3OcYwvdxCRho3hYOOfdagrmNfh03a2G8MeVYb7_0hdZVIeFC5HCX9PWWti1RMjTY61RalxE9NRKMtC9cBrNpYoH/s1600/the_beatles_wpap.jpg" >

apabila tidak ditambahkan tag alt, maka tulisan yang akan muncul adalah 'undefined'.

Semoga bermanfaat!

Sumber