Cara Membuat Tombol Share Dibawah Postingan Blog

Dalam meningkatkan popularitas sebuah blog, tentunya kita harus sepintar mungkin dalam hal membuat sebuah blog baik itu dari segi desain blog ataupun isi materi dari blog itu sendiri. dalam membuat sebuah artikel, tentunya kita harus bisa membuat artikel tersebut semenarik mungkin agar blog yang kita miliki bisa ramai di datangi oleh banyak pengunjung.

Dalam hal pengambangan sebuah blog atau meningkatkan popularitas pada sebuah artikel blog yang kita miliki, tentunya kita harus bisa berbagi artikel tersebut dengan orang-orang sepertihalnya di sosial media. untuk memperkenalkan blog kita kepada semua orang tentunya ada sebuah cara yaitu dengan kita melakukan share artikel ke berbagai jaringan sosial media mulai dari twitter, facebook, google+, linkedin dan sebagainya. untuk itu kita harus memiliki tombol share pada sebuah postingan blog yang dapat memudahkan kita bisa berbagi sebuah artikel di sosial media. berikut adalah cara membuat tombol share di bawah postingan blog.

1. Masuk/Login ke Blogger.

2. Padak bagian Template, plilih Edit Template.

3. Cari Kode <data:post.body/> 

4. Setelah itu kemudian anda Copy kode CSS dibawah ini dan letakan tepat dibawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bookmark'>
<style>
.bookmark{margin-top:5px;border:5px double red;border-right:1px solid red;border-left:1px solid red;background:#9fc5ed;box-shadow: 0 2px 5px 2px #ddd;}
.bookmark h4{color:#666;border-bottom:1px double red;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>If You Like This Post, Share it With Your Friends</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>

5. Pada keterangan/deskripsi yang berwarna BIRU, anda bisa menggantinya sesuai dengan keinginan anda.

6. Selanjutnya cari kode </head>

7. Copy kode CSS di bawah ini dan letakan tepat di atas atau sebelum 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>

8. Save Template.

Tweet