Membuat Tombol Share di Bawah Posting Blog

Membuat Tombol Share di Bawah Posting Blog - Salah satu faktor blog anda banyak dikunjungi adalah dengan membagikan artikel blog anda ke banyak media jejaring sosial. Jika blog anda sering-sering di publikasikan ke jejaring sosial, maka tentu akan banyak yang penasaran untuk mengunjungi blog anda. Karena sekarang ini jejaring sosial merupakan salah tempat untuk bisa mendongkrak popularitas suatu blog. Oleh karena itu, maka blog anda perlu mempunyai tombol share, yang apabila di klik oleh pengunjung, maka akan tersebar secara otomatis ke jejaring sosial. Baik itu di Facebook, Twitter, Google+, dan lain-lain. Penasaran, bagaimana cara membuatnya? Ikuti terus tutorial berikut ini.
Hasil tutorial tentang pemasangan tombol share di bawah posting blog sebagai berikut. 

 

Langkah-langkah pemasangannya:

1. Login ke akun blogger.
2. Masuk ke Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>

.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;}
.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}
.widgetshare a:hover {box-shadow: 0 0 5px #00ff00; border: 1px solid #e9fbe9;}
.fcbok { background: #3B5999; }
.twitt { background: #01BBF6; }
.gplus { background: #D54135; }
.digg { background: #5b88af; }
.lkdin { background: #005a87; }
.tchno { background: #008000; }
.ltsme { background: #fb8938; }

  4.  Selanjutnya copy kode berikut ini, lalu taruh di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'>

<div class='widgetshare'>
Share artikel ke: 
<a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> 
<a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> 
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tchno' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>");
//]]>
</script>
</div>

 5.  Langkah terakhir tinggal Simpan template lalu lihat hasilnya.

Catatan:
Biasanya disetiap blog, terdapat lebih dari satu kode untuk itu silahkan lakukan try and error, dengan cara lakukan copy kode-kode di atas dan taruh di bawah setiap kode <data:post.body/>  yang anda temui, dan lihat apa yang terjadi. Lakukan mulai dari kode <data:post.body/>  yang paling akhir. 


Bagaimana? Tertarik memasang tombol share ini di bawah postingan blog anda? Bila ketemu kesulitan, silahkan bertanya melalui kotak komentar di bawah.

Baca Selengkapnya