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.

20 komentar

Wah... Saya baru tau nih ada Pinterest *noraknya kau dee*..

hatur nuhun pisan kang ismet *nyengir*

Balas

Sami2 kang... kamana wae atuh ari kang Dede :)

Balas

Kereeeeeeen.......... nuhun gan

Balas

Info baru buat saya. Pengen daftar tapi masih sibuk monotize blog stlh custom domain, seperti ngeblog dari awal lagi. Terima kasih infonya Kang Ismet.

Balas

Silahkan dicoba daftar mba.. btw selamat dengan TLD-nya

Balas

keren sob..
ijin nyimak dulu ah.. :D

Balas

Kalau dipasang gabungan dengan button share yang melayang di blog itu kumaha caranya ya, kang.
Makasih sebelumnya.

Balas

ak mau widget yg dipake di blog ini "Share artikel ini sob !" kang :))

Balas

Kode di atas khusus untuk postingan, jadi tidak bisa dipasang di homepage. Kalau mau yang dipasang di homepage, silahkan daftar dulu, nanti ada Pin it button untuk home page. tinggal ditambahkan ke kode yang sudah ada.

Balas

hebat..hebat...artikelnya mantab2...
oya lama gk berkunjung templatenya kang ismet keren abis ......
jd pgen ngutak ngatik template lagi....hahha

Balas

Thanks sob... sibuk mikirin yang di angkot line 'D' ya? hehhe

Balas

hahahahha...jgn gtu dong kang...malu aq...wwkwkwkwkwk

Balas

Jadi inget waktu masih kuliah dulu... heuheu

Balas

hahaha bisa aja km kang...

Balas

thaks kang ismet atas tutorialnya, tapi saya lebih suka pakai yang kaket langsung dari site addthis, :) sukses terus kang buat blognya

Balas

Sama2 sob.. kalao saya kurang suka pake fihak ke-3 :)

Balas

kang saya sudah pasang tapi koq tiap dipin gambarnya gak muncul ya?ada apa sebenarnya? ini blog saya mohon pencerahannya

Balas

ada lebih satu di taruhnya di yang mana?

Balas

Poskan Komentar


×
Chat