Cara membuat tombol share di Blog

Selamat pagi sahabat blogger... tidak terasa kita telah memasuki hari kedua dibulan desember. Semoga kita semakin matang untuk memberikan artikel yang lebih menarik lagi.

Berhubungan dengan bagaimana cara menarik atau menambah pengunjung blog, salah satu cara yang sangat penting adalah dengan berbagi.

Nah... pada artikel yang berjudul "cara membuat tombol share diblog" kali ini, saya akan memberikan cara pembuatan tombol share atau tombol berbagi.

Langkah-langkahnya tidak terlalu sulit, hanya membutuhkan ketelitian dan kesabaran saja untuk mengganti bagian kode agar sesuai dengan tampilan blog sobat.
Sebagai contoh:

Adapun langkah-langkahnya adalah sebagai berikut:

• Sobat masuk ke Blog sobat terlebih dahulu
• Klik template dan pilih Edit HTML
• Pada halaman HTML

Cari kode: <data:post.body/>

• Kalau sudah ketemu, tempelkan kode dibawah ini tepat dibawah kode: <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bookmark'>
<style>
.bookmark{margin-top:5px;border:5px double Dodgerblue;border-right:1px solid Dodgerblue;border-left:1px solid Dodgerblue;background:#DCDCDC;box-shadow: 0 2px 5px 2px #ddd;}

.bookmark h4{color:#666;border-bottom:1px double Dodgerblue;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>
<h4>Jika anda menyukai artikel ini, Bagikan ke semua temanmu</h4>
<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>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
• Jangan beranjak dulu, karena masih ada satu kode lagi yang harus kita pasang. Masih dihalaman HTNL sobat, silahkan sobat cari kode: </head>
• Kalau sudah ketemu, silahkan sobat Copy dan Pastekan kode dibawah ini tepat diatas kode: </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>
• Selesai. klik simpan template

Keterangan:

• Ganti "Jika anda menyukai artikel ini, Bagikan ke semua temanmu" menurut sobat
• Kode warna untuk garis atau border: dodgerblue, silahkan sobat ganti juga agar warna garis seusai dengan tampilan blog sobat
• Kemudian untuk warna dalam kotak : #DCDCDC, silahkan sobat ganti juga

Sekian artikel kali ini, semoga bermanfaat..

Jangan sungkan untuk memberikan kritik dan saran. Kritik dan Saran dari teman-teman adalah sebuah dukungan untuk admin

Author : Unknown

Share this

Related Posts