Cara Membuat Tombol Share Klasik Style

Tombol Share Di Bawah Postingan Blog

Halo.. sob, hari ini kita akan membahas tentang Cara Membuat Tombol Share Klasik Style, biasanya tombol share digunakan oleh pengunjung untuk men-share artikel yang menurutnya itu menarik dan mungkin yang mereka sukai, kita sebagai author juga kadang kala menggunakan tombol share ini juga sama halnya dengan yang saya lakukan. heheheh....

Share sama saja dengan kita mempromosikan blog kita di Social Media, tidak ada yang salah jika seorang mempromosikan blognya dan itu wajar saja, tapi memang setiap blogger mempunyai selera yang berbeda dan ada juga yang tidak ingin memasang tombol share, mungkin karena alasan tertentu...

Nah... gak udah banyak ngomong dah sob.. langsung aja cekidot :

1). Pergi ke Blogger Dashboard > Template > Edit HTML.

2). Copy kode CSS di bawah ini dan letakkan tepat di atas kode ]]></b:skin>.

.widgetshare {
font: normal 18px 'Yanone Kaffeesatz', sans-serif, Arial, Tahoma, Century gothic, sans-serif;
background: #3e4043;
border: 1px solid #444;
padding: 5px 12px;
color: #fff !important;
margin: 10px -20px 0px -20px;
}
.widgetshare a{
font: normal 18px 'Yanone Kaffeesatz', sans-serif, Arial, Tahoma, Century gothic, sans-serif;
text-decoration: none !important;
padding: 5px 11px;
color: #fff !important;
}
.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; }

Keterangan:
Ubah warna tombol share sesuai dengan yang sobat inginkan, (Ubah Tulisan Berwarna Biru)

3). Selanjutnya copy kode HTML di bawah ini tepat dibawah kode <data:post.body/>.

<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>

Keterangan:
Biasanya kode <data:post.body/> berjumlah 3 mungkin lebih, itu tergantung jenis template yang digunakan, jadi sesuaikan untuk men-copy kode diatas, biasanya kode diatas berhasil di copy di bawah kode <data:post.body/> urutan nomer 3 dari atas seperti di template saya, jika masih tidak berhasil coba di kode yang selanjutnya.

Hasilnya akan seperti ini:

Contoh Dengan Warna Hitam

Oke... Terimakasih semoga tutorial dari Kang Fandi kali ini dapat bermanfaat bagi Sahabat Blogger.

Terima kasih telah membaca artikel Cara Membuat Tombol Share Klasik Style . Jika Anda ingin copy-paste / menyalin sebagian ataupun keseluruhan dari artikel ini, harap anda mencantumkan link berikut Cara Membuat Tombol Share Klasik Style sebagai sumbernya atau anda bisa copy permalink dibawah ini.
<a href="https://kang-fandi.blogspot.com/2014/02/cara-membuat-tombol-share-klasik-style.html">Cara Membuat Tombol Share Klasik Style</a>

Bagikan Artikel Ini : Facebook Google+ Twitter