Menambahkan Tombol Pinterest Pada Blog

Pinterest merupakan salah satu social networking yang sedang booming pada saat ini. Namun jika kita ingin mendaftar ke situs tersebut, kita harus meminta terlebih dahulu dan tidak seperti facebook yang siapa saja boleh daftar hehe. Dan saat saya membaca salah satu artikel di blog luar negeri, pinterest merupakan salah satu media sosial untuk mengembangkan blog yang kita kelola. Namun pada kali ini saya hanya akan memberi widget-nya saja yang saya dapatkan kodenya dari http://www.bloggersentral.com/. Lihat petunjuknya di bawah ini :

1. Masuk akun blogger kamu.

2. Klik Rancangan --> Edit HTML --> Centang Expand Template Widget dan jangan lupa di back up template blog kamu terlebih dahulu.

3. Cari kode <data:post.body/> dan copas kode javascript di bawah ini, setelah di copy letakan kode yang sudah kamu copy tadi di bawah kode <data:post.body/>.

<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<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;'/>
</div>
<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> 
</b:if>
<!-- Pinterest button End -->

Note :

Tipe Tombol	count-layout value (letak penghitung) kode Hijau	margin-left (baris ke-5) value
	vertical	-46px
	horizontal	-93px
	none	-46px

• Jika ingin meletakan di atas artikel paste kode sesudah <data:post.body/>
• Ubah nilai text-align properti di baris 3:
  Rata kanan: ganti kode align ke right;
  Rata tengah: set kode align ke center;

4. Simpan template :D

Postingan Terkait:

Posted in: Blogger,Social Bookmarking,Social Sharing,Widget