Membuat Tombol Share Social Bookmark di Blogspot

Tips dan trik - Membuat Tombol Share Social Bookmark di Blogspot yakni untuk menambahkan tombol share dibawah postingan kita yang menggunakan blogspot, tidak perlu ngerti java script atau pengkodean seperti programer yang doyan maen kode html dan java segala macam nama untuk membuat program.

Biasanya kalau kita merawat tampilan blog kita, akan semakin membuat semangat untuk kita merawatnya dan tidak ingin blog kita di suspend atau di hapus oleh google atau mesin pencari, karena ingin blog kita terus mengudara didunia maya.

Selain untuk keperluan mempercantik blog, tombol share atau sosial bookmark itu juga untuk menggedor penambahan pengunjung ke blog kita, yah pada umumnya seseorang akan memanfaatkan Social Bookmark untuk menaikan Traffic di Blognya. Berikut screen shot tombol share Social Bookmark Tanpa Java Script/dengan Mengedit HTML :

Cukup lengkap bukan? Nah bagi anda yang berminat untuk memasang Social Bookmark ini di bawah postingan anda, berikut tutorialnya :

1. Login ke Akun Blogger anda.
2. Pilih, Template » Edit HTML » Centang "Expand Template Widget"
    Copy kode dibawah ini dan pastekan tepat diatas tag ]]></b:skin>

.fbshare {line-height: 20px; color: #fff !important; background: #3b5998; text-decoration: none !important; border: 1px solid #313c7d; padding: 3px;  font-family: Tahoma, verdana, sans-serif; font-size: 12px; border-radius: 2px;}
.twshare {color: #fff !important; background: #4099FF; text-decoration: none !important; border: 1px solid #3a8be8; padding: 3px;  font-family: Tahoma, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.plshare {color: #fff !important; background: #c0361a; text-decoration: none !important; border: 1px solid #9c2c15; padding: 3px; font-family: Tahoma, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.dgshare {color: #fff !important; background: #5b88af; text-decoration: none !important; border: 1px solid #4a6f8f; padding: 3px; font-family: Tahoma, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.lkshare {color: #fff !important; background: #005a87; text-decoration: none !important; border: 1px solid #003f5e; padding: 3px; font-family: Tahoma, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.tcshare {color: #fff !important; background: #157501; text-decoration: none !important; border: 1px solid #105901; padding: 3px; font-family: Tahoma, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.sharebutton {background: #cccccc;border: 1px solid #999;padding: 5px;}

3. Jangan simpan template dulu, tapi lanjutkan dengan mencari tag <data:post.body/> dan jika sudah ketemu, copy kode dibawah ini tepat di bawah tag <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharebutton'>
Share This Article To: 
<a class='fbshare' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> 
<a class='twshare' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> 
<a class='plshare' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkshare' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tcshare' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='dgshare' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>
</div>
</b:if>

Perhatikan !Jika di dalam template terdapat banyak <data:post.body/>, maka cari kode HTML yang kurang lebih seperti dibawah ini dan pastekan kode di atas tepat di bawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
    </b:if>
</b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

4. Sekarang simpan template dan lihat hasilnya.

Selamat mencoba  Membuat Tombol Share Social Bookmark di Blogspot semoga bisa di praktekan tanpa ada kendala dan langsung bisa, hehe kan gampang toh si katro aja bisa tinggal copy paste aja kan.