Cara Membuat Tombol Share di Bawah Posting Blog

Cara Membuat Tombol Share di Bawah Posting Blog - bagi para blogger tentu tidak asing lagi dengan tombol share yang biasa terlihat di bawah postingan blog, tombol tersebut berfungsi untuk memudahkan visitor membagikan artikel yang kita post ke beberapa socialmedia seperti facebook, twitter, google+ dan lainnya. Sebenarnya blogspot sudah menyediakan tombol share default. Namun, tombol tersebut tidak valid HTML5 jadi kita harus memodifikasi agar tombol tersebut lolos validator W3C dan bisa valid HTML5. Untuk membuat tombol share ini hanya menggunakan CSS tanpa menggunakan gambar, sehingga tampilan dari tombol share ini lebih sederhana dan minimalis dengan warna yang menarik. Untuk memasangnya juga cukup mudah hanya dengan menambahkan sedikit kode di template blog. Hasilnya nanti akan seperti gambar di bawah ini:

Berikut Cara Membuat Tombol Share di Bawah Posting Blog step by step:

1. Login ke akun blogger.
2. Masuk ke Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu taruh diatas 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 paste 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. Kemudian simpan template lalu lihat hasilnya.

Demikian Cara Membuat Tombol Share di Bawah Posting Blog. Selamat mencoba dan semoga berhasil.


Sumber : http://mas-andes.blogspot.com