Cara Membuat Tombol Share Dibawah Postingan Valid HTML5

Pada Kesempatan kali ini Blog Pintasku akan berbagi tentang Bagaimana Cara Memasang Tombol Share Dibawah Postingan ? Mungkin sobat pastinya sudah tidak asing lagi melihat Tombol Share yang Terletak dibawah Postingan. Perlu sobat ketahui, Fungsi Memasang Tombol Share ini adalah untuk mempermudah Visitor atau pengunjung ketika ingin membagikan artikel kita melalui Sosial Media, baik itu Facebook, Twitter, Google+, dan Sosial Media Lainnya. Memang Pihak blogger juga menyediakan Tombol share tersebut, tapi tombolnya tersebut tidaklah elegan atau keren, Oleh karena itu saya akan memberikan tutorial Blog mengenai Cara Membuat atau Memasang Tombol Share Dibawah Postingan.

Jika Sobat menggunakan Tombol Share Default dari Blogger, itu menurut saya pribadi kurang efesien karena tidak valid HTML5, Nahh Bagaimana Cara Membuat Tombol share yang bisa valid HTML5 dan lolos dalam W3C, silahkan sobat ikuti saja Tutorial Blogger dibawah ini.

Cara Membuat Tombol Share Dibawah Postingan Valid HTML5

1. Seperti biasa langkah pertama login ke Blogger.
2. Masuk Ke Editor HTML ( Template - Edit HTML)
3. Copy kode berikut ini dan letakan 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 #FFFFFF; border: 1px solid #e9fbe9; cursor:pointer; }
.fcbok { background: #3B5999; }
.twitt { background: #01BBF6; }
.gplus { background: #D54135; }
.digg { background: #5b88af; }
.lkdin { background: #005a87; }
.tchno { background: #008000; }
.ltsme { background: #fb8938; }

4. Copy lagi kode dibawah ini, dan letakan di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'>

<div class='widgetshare'>
Share : 
<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 atau Simpan, dan Lihatlah Hasilnya.

Catatan : Mungkin Biasanya beberapa templates Blog terdapat lebih dari satu kode <data:post.body/> atau <div class='post-footer'> oleh karena itu perlu diperhatikan dan perlu disesuaikan. 

Sekian Tutorial dari saya tentang Cara Membuat Tombol Share Dibawah Postingan Valid HTML5. Semoga Tutorial ini bisa bermanfaat untuk semuanya. Terimakasih Telah berkunjung, silahkan berkomentar jika ada yang tidak dimengerti.