Cara Membuat Tombol Share Keren Valid HTML5 Di Bawah Posting Blog

Cara Membuat Tombol Share Keren Full Color Dan Valid HTML5 Di Bawah Posting Blog. Seperti yang sobat  ketahui, tombol share dalam blog itu memang sangat diperlukan. Selain untuk memudahkan pengunjung blog untuk membagi artikel anda, dengan adanya tombol share ini juga dapat berpengaruh baik terhadap SEO blog anda. Apalagi tombol share google plus, saya rasa ini yang paling bermanfaat. Semakin banyak artikel yang di share pengunjung ke media jejaring sosial, maka semakin banyak pula pengunjung yang datang ke blog kita. 

Sebetulnya untuk tamplate asli bawaan dari blogger sudah tersedia, tapi untuk tamplate hasil download mungkin banyak yang belum menyediakan. Tombol Share yang akan saya share sekarang ini hanya menggunakan CSS saja tanpa menggunakan gambar, sehingga tampilan dari tombol share ini lebih sederhana dan minimalis dengan di sertai warna-warna yang menarik. Untuk memasang tombol share di bawah posting blog juga cukup mudah, hanya dengan menambahkan sedikit kode saja yang terdapat dibawah ke dalam Edit HTML template blog maka hasilnya akan seperti yang tertera pada gambar di bawah ini:

Bagi sobat yang berminat untuk memasangnya, silakan ikuti Tutorial atau Cara untuk Membuat Tombol Share di Bawah Posting Blog agar valid HTML5 dan full color.

1. Login ke blogger dengan akun blog sobat.
2. Klik menu Tata Letak > Edit HTML > Expand Template Widget
3. Copy kode di bawah ini tepat 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. Save dan lihat hasilnya

Note: Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat beberapa kode <data:post.body/> dan <div class='post-footer'> maka dari itu silahkan sesuaikan dengan template blog yang anda gunakan. 

Bagaimana, mudahkan cara memasangnya ? sekarang anda sudah berhasil memasang tombol share di blog anda.

Baca Juga: