Tombol Share Batang Keren Buat Blog

Bagaimana cara membuat tombol share batang yang keren? Sebenarnya cara memasang social book mark atau tombol share yang keren pada situs web kita tidak susah. Silakan Anda menuju ke menu Template pada blog Anda lalu pilih HTML mode. Untuk tampilan tombol share keren ini

Silakan Anda cari kode ]]></b:skin> dan letakkan kode berikut di atasnya:

/* SHARE YUK BUTTON */
#share-yuk{font-size:13px;margin:10px 0px 10px;padding:5px 5px;}#share-yuk p{float:left;display:block;padding:4px 0px 5px 0px;margin:5px 3px 0;}#share-yuk a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:5px 5px;display:block;color:#fafafa;padding:5px 8px;margin:2px 3px 3px;
border:2px solid #fff;}#share-yuk a:hover{top:1px;
left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)}

Selajutnya menuju ke bagian badan artikel. Cari kode <data:post.body/>. Apabila ingin tombol tersebut terletak di atas artikel maka letakkan kodenya di atas kode <data:post.body/>. Jika ingin tombol terletak di bawah artikel, letakkan kodenya di bawah kode <data:post.body/>. Silakan letakkan kode berikut sesuai keinginan Anda.

<!-- Tombol Share Start -->
<div id='share-yuk'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' style='background:#3b5998;' target='_blank' title='Bagikan ke Facebook'>Facebook</a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' style='background:#c0361a;' target='_blank' title='Bagikan ke Google+'>Google+</a>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=Just4rtBlog&amp;lang=id&quot;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Bagikan ke Twitter'>Twitter</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' style='background:#111111;' target='_blank' title='Bagikan ke Digg'>Digg</a>
<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' style='background:#4E7DA9;' target='_blank' title='Bagikan ke Reddit'>Reddit</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+"' target='_blank' rel='nofollow' style='background:#FF9900;' title='Bagikan ke LintasME'>Lintaskan</a>");
//]]>
</script>
<div class='clear'/>
</div>

</div>
<!-- Tombol Share End --> 

Simpan template Anda dan buka halaman artikel blog. Lihat hasilnya!

Bagaimana caranya agar tombol share berada di kanan, tengah, atau kiri artikel?

Agar tombol share terletak di kanan artikel, silakan tambahkan kode <right> di bawah kode <!-- Tombol Share Start --> dan tambahkan kode penutupnya <right/> di atas kode <!-- Tombol Share End -->

Agar tombol share terletak di tengah artikel, silakan tambahkan kode <center> di bawah kode <!-- Tombol Share Start --> dan tambahkan kode penutupnya <center/> di atas kode <!-- Tombol Share End --> 

Agar tombol share terletak di kiri artikel, silakan tambahkan kode <left> di bawah kode <!-- Tombol Share Start --> dan tambahkan kode penutupnya <left/> di atas kode <!-- Tombol Share End --> atau biarkan tanpa tambahan kode tersebut karena posisi kiri merupakan posisi default bawaannya.

Bagaimana cara membuat tombol share keren seperti ini?

Baca selengkapnya >>>

Tweet