Memasang Tombol Share Dibawah Posting Blog

Saya yakin banyak dari kalian pembaca yang budiman sudah tidak asing lagi dengan istilah tombol share, widget berupa tombol berbagi akan sering kita temui dibanyak blog atau website. Widget ini memiliki fungsi utama yaitu untuk memudahkan pengunjung blog  yang ingin membagikan atau menceritakan artikel yang ia anggap bermanfaat tersebut kepada rekan mereka lainnya melalui akun jejaring sosial miliknya. Tentu dengan semakin banyak orang yang menyebarluaskan artikel tersebut otomatis akan banyak orang melihat dan hasilnya akan bisa meningkatkan trafik kunjungan pada blog tersebut.
Untuk itulah sangat dianjurkan setiap blog/website memiliki widget tombol share ini sebagai salah satu cara untuk mengenalkan blog/website milinya ke dunia luas dan tanpa batas :D.

Jika pada blog, tombol share umumnya dipasang dibawah postingan. Hal ini dimaksudkan agar saat pengunjung selesai membaca artikel bisa dengan mudah menemukan tombol share ini dan tinggal klik untuk berbagi.
Nah, untuk agan-agan blogger jika belum terdapat tombol share pada blog kalian, yuk ikuti langkah-langkah cara memasang tombol share dibawah posting yang sudah saya siapkan tulisannya dibawah ini.

1. Login di Blogspot
2. Dihalaman dashbor klik pada tulisan "Template"
3. Lalu pilih menu "Edit HTML"
4. Sudah dihalaman HTML template, selanjutnya cari kode ]]></b:skin>

5. Jika sudah ketemu, sekarang Copy (Ctrl+C) kode CSS dibawah ini dan Paste (Ctrl+V) diatas kode ]]></b:skin>

#share-button{
border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:10px 0px;width:100%;float:left;height:20px;font-family: 'Noto Sans', sans-serif; font-size: 12px; font-weight: 400;}
#share-button p{
float:left;
background:#fafafa;
display:block;
padding:5px 8px !important;
margin-top:-3px;
border-radius:6px 6px;}
#share-button a{
position:relative;
float:left;
border-radius:6px 6px;
display:block;
color:#fafafa;
padding:5px 8px;
margin:-3px 3px 3px;}
#share-button a:hover{
}

6. Sekarang cari lagi kode <data:post.body/> , mungkin akan terdapat dua sampai tiga kode seperti itu. Pilih saja yang nomor terakhir.

7. Selanjutnya Copy (Ctrl+C) kode dibawah ini dan Paste (Ctrl+V) dibawah kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clear'/>
<div id='share-button'>
<p>Share to</p>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;' target='_blank'>Facebook</a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#c0361a;' target='_blank'>Google+</a>
<a expr:href='&quot;https://twitter.com/share?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' rel='nofollow' style='background:#4099ff;' target='_blank'>Twitter</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:blog.url' rel='nofollow' style='background:#000;' 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+"' target='_blank' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>");
//]]>
</script>
<div class='clear'/>
</div>
</b:if>

8. Langkah terakhir "Simpan template"

Sekarang boleh kamu lihat hasilnya dengan membuka salah satu judul posting untuk mengetahui sudah ada kah belum tombol share yang baru saja kamu buat tadi.

Ceritakan ini di :

Facebook Google+ Twitter Digg

Tentang Penulis :

Ansory Esce
Dia bukanlah seseorang yang memiliki segudang ilmu untuk bisa diceritakan. Bukan juga seorang Blogger profesional yang bisa menggurui kalian tentang ilmu Blogging atau tentang ilmu Internet lainnya. Dia hanyalah seorang Blogger "alakadarnya" yang memiliki keterbatasan pengetahuan. Menulis di Blog ia lakukan sekedar untuk mengenal banyak teman baru serta sebagai media untuk belajar dan saling berbagi. Selengkapnya..
Berteman dengannya di: Facebook | Twitter | Google+