Memasang Pin It Button dengan Counter di Blogger

Memasang Pin it Button dari Pinterest dengan Counter atau tanpa counter di Blogger/Blogspot. Tentunya bagi sebagian Anda sudah tidak asing dengan Pinterest, atau mungkin Anda belum tau apa itu Pinterst. Pinterest merupakan 'Social Networking Image' yaitu jejaring sosial yang mengkhususkan pada gambar.

Jadi, ketika anda menekan tombol Pin it, maka anda harus memilih gambar mana yang akan di share ke Pinterest. Hal yang berbeda yang yang anda lakukan dengan Facebook, ketika klik 'Like' atau 'Share' maka yang akan muncul adalah judul, thumbnail gambar dan deskripsi. Lain halnya dengan Pinterest, hanya men-share gambar yang ada di blog anda. Untuk lebih memahaminya, silahkan daftar di Pinterest.

Dibawah ini, saya buat tutorial cara memasang tombol (button) Pin it, baik Basic (tanpa counter) Vertical with counter dan Horizontal with counter.

Cara Memasang Tombol Pin It button.

1. Login ke Blogger
2. Pilih Template > Edit HTML
3. Centang Expand Template Widget
4. Cari kode <data:post.body/>, kemudian simpan kode Pin It button diawah kode tadi. (silahkan pilih kodenya).

Apabila Pin it button ingin tampil di atas postingan, maka simpan diatas <data:post.body/>

Kode Pin it Button

Basic Button

<a class='pin-it-button' count-layout='none' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>

Vertical Count Button (Vertikal dengan penghitung)

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>

Horizontal Count Button (Horizontal dengan penghitung)

<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>

5. Simpan template.