16 Agustus 2012

Pasang Floating Share Button Di Blog


Share Button atau yang sering kali kita sebut Tombol Bagi, merupakan salah satu cara agar user atau pengunjung blog kita dapat lebih mudah membagikan content blog kita ke berbagai situs jejaring favorit mereka. Dengan seperti ini tentu saja ini akan membantu menjaring pengunjung yang lebih banyak ke blog kita.
Perlu kita ketahui, SEO optimizen bukan hanya dengan cara melakukan Submit URL, dan lain sebagainya, ini juga salah satu langkah agar kita mendapatkan pengunjung yang lebih banyak.
Oke kita mulai saja ya, tidak usah banyak cing cong...haha..!!

Langkah pertama yang harus kita lakukan tentu saja Login ke Akun Blogger. kemudian masuk ke menu rancangan, pilih yang elemen laman atau kalau bahasa inggrisnya Page Element..hehe! Nah, kalau sudah tambahkan gadget, pilih yang HTML/Javascript, Copy paste Code Berikut :

<!--Floating Share Button Widget Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 3px dotted green; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#d26607;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-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='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><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></div><br/></div>
<div class='sbutton'><a href="http://blog-thinker.blogspot.com/2012/03/pasang-floating-share-button-di-blog.html">Get This One</a><br/></div>
<!--Floating Share Button Widget End-->

kemudian Save.
SELESAI.

Untuk merubah tampilan warna maupun posisi, silahkan edit sendiri CSS nya.
Semoga Bermanfaat.

Tidak ada komentar: