Memasang Pin it Button Otomatis pada Blogger

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.

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


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

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>

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

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

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/AVvXsEiD8AFILC7FHPUDFWpZirG-7U2jmMfVCQry_jvs9zJmCF_M7GYR4rg5fN6WEu-T4vJSSIrqKeGG2aTxj1-8A_LE-5GXbl4a1RxK1bM-cgnwTsgM1EPEjO_5OVy1sJYMOULKv8lKnBX87Js3/s1600/the_beatles_wpap.jpg" >

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

Silahakn comment sobat ;)