Cara Memasang Tombol Share di Blog

Bagi seorang blogger, mempercantik blog itu hukumnya wajib..!! Karena masih newbie alias baru di dunia bloger, saya jadi rajin searching tentang cara mempercantik blog agar terlihat menarik. Akhirnya ketemu juga salah satu artikel yang cukup menarik untuk dicoba, yaitu Cara Memasang Widget Floating Share Melayang (Twitter, Facebook, dan Google +1).

Trik ini cukup menarik dan simple, dan widget ini nanti akan tetap ditempatnya, walaupun scroll di gerakkan keatas ataupun kebawah. artikel ini saya temukan di kamu-klik.blogspot.com. Setelah saya coba ternyata berhasil. contohnya seperti gambar dibawah ini. Karena berhasil, akhirnya artikel tadi saya modifikasi dan share sama teman-teman blogger lainnya. kenapa harus di share.? karena banyak blogger yang memberikan tips dan trik yang seringkali gagal jika dicoba. langsung aja gan, ini dia caranya:

   

1. Login ke akun blog kamu.
2. Pilih "Tata letak"
3. Pilih "Add Gadget / Tambah Gadget"
4. Pilih "HTML/Javascript"
5. Paste kode berikut ini di kolom tersebut

<style> #floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px;  }  #mbtsidebar { background:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:60px; margin:0 0 0 5px; }  .fb_share_count_top {width:52px !important;}  .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}  .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}  .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style>     <div id="floatdiv"> <div id="mbtsidebar"> <table cellpadding="1px" cellspacing="0">   <tr> <td style="padding:5px 0px 0px 0;"><a href="https://twitter.com/share" class="twitter-share-button" data-via="NAMA TWITTER KAMU" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </td> </tr>  <tr> <td style="padding:5px 0 2px 0;"> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> </tr> <tr> <td style=" padding:5px 0px 0px 0px;">  <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>  <g:plusone size="Tall" expr:href="data:post.url"> </g:plusone></td> </tr> <tr> <td> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><blink>Get This</blink></a></p></td></tr></table></div></div>

NB:

• untuk teks yang berwarna merah, itu berarti letak widget tersebut, tingginya 15% dari blog kamu, rubah agar sesuai dengan blog kamu, agar tidak menutupi widget yang lainnya. contohnya di blog saya gunakan bottom:2%.
• untuk teks yang berwarna kuning, itu berarti widget kamu  terletak di samping kiri. rubah agar sesuai dengan blog kamu, agar tidak menutupi widget yang lainnya. contoh di blog saya gunakan margin-left:+300px
• untuk teks yang berwarna hijau, itu untuk backgrount widget tersebut. rubah sesuai dengan warna background yang kamu inginkan. contoh di blog saya gunakan kode warna background:#12470a
• untuk teks yang berwarna biru, itu adalah alamat twitter kamu, rubah sesuai dengan nama twitter kamu.

6. setelah itu "simpan", tanpa diberi judul.!

7. widget kamu kini telah berhasil dipasang. 

Agar hasilnya bagus dan sesuai dengan posisi yang kita inginkan, klik "pratinjau" untuk melihat hasilnya. Jika posisinya masih tidak sesuai keinginan, rubah teks yang berwarna "merah" dan "kuning". kemudian "simpan" dan klik "pratinjau". Begitu seterusnya, sampai widget tersebut terletak di posisi yang benar-benar kamu inginkan.

Semoga berhasil dan happy blogging. salam blogger. :-) alimin (-: