Selasa, 26 Juni 2012

Menambah Floating Share Button

http://sharingismylife.blogspot.comSalah satu faktor penting untuk meningkatkan traffic ke blog adalah mengintegrasikan blog dengan jejaring sosial populer seperti Facebook, Twitter, Google+, Stumbleupon dan Digg. Sebenarnya Blogger sudah menyediakan fasilitas tersebut pada tiap postingan namun Anda bisa menambah share button yang lebih atraktif seperti gambar disamping. Dengan fasilitas ini para pengunjung blog akan lebih mudah memberikan apresiasi terhadap artikel yang kita buat.

Floating Share Button ini Berisi Like/Share Button dari Situs Sosial populer seperti Facebook dll, posisinya statis di samping sidebar sehingga tidak mengganggu halaman utama dan tidak ikut bergerak bersama scroll halaman. Untuk memasang widget tersebut Anda bisa mengikuti langkah berikut ini. Tidak Perlu mengutak atik Template, kamu Hanya perlu Menambahkan "HTML/Script" gadget. Cek it Dot :

1. Login ke Blogger
2. Pada halaman dashboard pilih menu Layout
3. Klik Add a Gadget
4. Cari dan klik HTML/Javascript
5. Pada Configure HTML/Javascript, Title tidak harus di isi.
6. Letakaan kode berikut pada halaman Content

Dark Template
<!--SideBar Floating Share Buttons Code Start-->
<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;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='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></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 style="clear: both;font-size: 9px;text-align:center;"><a href="http://sharingismylife.blogspot.com/2012/06/meanambah-floating-share-button.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

<!--SideBar Floating Share Buttons Code End-->
White Template
<!--SideBar Floating Share Buttons Code Start-->
<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;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='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></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 style="clear: both;font-size: 9px;text-align:center;"><a href="http://sharingismylife.blogspot.com/2012/06/meanambah-floating-share-button.html" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

<!--SideBar Floating Share Buttons Code End-->
7. Click Save/Simpan
8. selesai

Sumber : om Gugel