Cara Membuat Widget Share Simple Tanpa Javascript

Assalamu'alaikum sahabat blogger, dipostingan kali ini saya akan berbagi tutorial blogger lagi nih setelah kemarin mempost Cara Mengganti "Poskan Komentar" Teks Dengan Gambar di Blog, namun di sore hari ini saya akan berbagi tentang Cara Membuat Widget Share Simple Tanpa Javascript. Langsung saja,

Widget Share, menurut saya sih widget ini salah satu widget penting untuk sebuah blog, soalnya kenapa? agar artikel-artikel kita yang bermanfaat dapat langsung di share ke situs jejaring sosial, seperti Facebook, Twitter, Google+ dan Lain-lain, dan tentunya dapat menambah traffict juga ke blog kita. Widget Share ini kenapa saya sebut simple karena tidak menggunakan gambar dan Javascript. berikut screenshot nya :

Tertarik ga nih? Jika agan agan ingin memasangnya bisa ikuti langkah-langkah di bawah ini :

Login Ke Akun Blogger
Pergi Ke Halaman Edit Template => klik edit HTML
Cari kode </b:skin> (Ctrl+F untuk pencarian agar lebih mudah)
Copy paste kode dibawah ini tepat di atas kode tadi

.sharecontain {background: #cccccc;border: 1px solid #999;padding: 5px;}
.fbshare {line-height: 20px; color: #fff !important; background: #3b5998; text-decoration: none !important; border: 1px solid #313c7d; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; border-radius: 2px;}
.twshare {color: #fff !important; background: #4099FF; text-decoration: none !important; border: 1px solid #3a8be8; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.plshare {color: #fff !important; background: #c0361a; text-decoration: none !important; border: 1px solid #9c2c15; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.dgshare {color: #fff !important; background: #5b88af; text-decoration: none !important; border: 1px solid #4a6f8f; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.lkshare {color: #fff !important; background: #005a87; text-decoration: none !important; border: 1px solid #003f5e; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.tcshare {color: #fff !important; background: #157501; text-decoration: none !important; border: 1px solid #105901; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}

Jika Sudah, Cari kode <data:post:body/>, lalu tambahkan kode di bawah ini tepat di bawah kode tadi :

<div class='sharecontain'>
Bagikan Ke:
<a class='fbshare' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a>
<a class='twshare' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a>
<a class='plshare' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkshare' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tcshare' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='dgshare' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>
</div>

 Oke, cukup sekian post saya tentang Cara Membuat Widget Share Simple Tanpa Javascript, semoga berhasil :) jika ada yang ingin di tanyakan tinggal tanyakan di kolom komentar di bawah :) Terima Kasih..