Membuat Tombol Share Di Bawah Artikel 1

Tombol share - Hampir semua template baik itu template bawaan blogger atau template-template hasil buatan sendiri saya yakin pasti sudah ada tombol untuk berbagi pada bagian bawah artikel atau dibagian lain. Tapi kadang-kadang kita kurang cocok dengan tombol berbagi tersebut. Sebenarnya semua bentuk atau model tombol share mempunyai fungsi yang sama yaitu agar pembaca bisa dengan mudah membagikan artikel-artikel kita yang mereka baca ke media sosial lainnya.

Namun kadang-kadang si pembaca enggan untuk mengklik tombol berbagi atau share yang sudah ada gara-gara modelnya tidak menarik. Sebenarnya ada banyak model tombol share yang bisa di aplikasikan ke dalam blog atau web. Untuk kali ini saya akan berbagi cara membuat tombol share yang modelnya seperti di bawah ini.

Silahkan ikuti langkah-langkah berikut ini :

Cara Mudah Membuat Tombol Share Di Bawah Artikel

1. Login ke akun blog anda

2. Pilih Template lalu Edit HTML

3. Dengan bantuan CTRL+F, cari kode berikut <data:post.body/> (kalau ada banyak pilih yg ke dua)

4. Copy kode di bawah ini lalu Paste tepat di bawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bookmark'>
<style>
.bookmark{margin-top:5px;border:5px double yellow;border-right:1px solid yellow;border-left:1px solid yellow;background:#9fc5ed;box-shadow: 0 2px 5px 2px #ddd;}
.bookmark h4{color:#666;border-bottom:1px double yellow;padding:0;margin-bottom:10px;padding-left:10px;}
.bookmark img{}
.book{float:left;margin:0 8px 0 0;padding:1px;border:1px solid #eee;background:#ffffff;}
  .booklast{float:left;margin:0;padding:1px;border:1px solid #eee;background:#ffffff;}
</style>
  <center><h4>Silahkan share artikel ini jika bermanfaat</h4></center>
<div align='center'>
<span class='st_facebook_large' displayText='Facebook'/>
<span class='st_twitter_large' displayText='Tweet'/>
<span class='st_linkedin_large' displayText='LinkedIn'/>
<span class='st_digg_large' displayText='Digg'/>
<span class='st_stumbleupon_large' displayText='StumbleUpon'/>
<span class='st_reddit_large' displayText='Reddit'/>
<span class='st_tumblr_large' displayText='Tumblr'/>
<span class='st_email_large' displayText='Email'/>
<span class='st_dzone_large' displayText='DZone'/>
<span class='st_netlog_large' displayText='Netlog'/>
<span class='st_google_large' displayText='Google'/>
<span class='st_identi_large' displayText='identi.ca'/>
<div style='clear:both;'/></div></div>
</b:if> 

Keterangan :

• Ganti tulisan yellow dengan (red/blue/black dll) untuk merubah warna border
• Ganti tulisan merah di atas sesuai dengan selera anda

5. Selanjutnya, cari kode </head>. Lalu Copy kode di bawah ini dan Paste tepat di atas </head>

<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>

6. Selanjutnya SAVE template anda. Jika ada kesalahan silahkan klik tombol UNDO.

Jika model tombol share di atas masih kurang pas dengan keinginan anda, silahkan tunggu up datenya pada artikel mendatang. Yang penting pantengin terus blog newbie ini agar tidak ketinggalan.