Membuat Tombol Share di bawah Postingan Blog

Published by : Rz Bot    Blogger Tutorial

Membuat Tombol Share di bawah Postingan Blog - Kali ini  saya akan share tombol widget share di bawah postingan,sebenarnya tanpa memasang tombol share ini dari blogger sendiri sudah menyediakan widget tombol share akan tetapi tidak valid HTML5. Jadi kita modifikasi agar bisa lolos dari Validator W3C biar valid HTML5, cara ini saya ambil dari mas Andes hanya dengan menggunakan CSS tanpa menggunakan Gambar, berikut langkah membuatnya :

1. Login ke Blogger

2. Masuk ke Template dan edit HTML

3. Copy dan Paste 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. Copy kode berikut ini, lalu letakkan 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. Simpan Template dan coba lihat hasilnya

Perlu di ingat pada saat pemasangan kode HTML biasanya pada template terdapat beberapa kode <data:post.body/> dan  <div class='post-footer'>. Sesuaikan saja pada template Anda gunakan
Semoga membantu :)
resource: http://mas-andes.blogspot.com/2013/10/membuat-tombol-share-di-bawah-posting-blog.html

Jangan Lupa Like FPnya Blog Tic Tac