Membuat tombol like facebook twitter dan google+ melayang di samping kiri blog yang
pada postingan kali ini akan saya share ke sobat blogger.Mungkin bagi
sya yang newbie di blog judul postingan ini sudah umum atau banyak sobat
bloger lain yang mengetahui caranya tpi ga salahnya
saya berbagi kepda sobat yg blm mengetahui caranya.
Artikel ini sya buat krna sudah terlebih dulu di tes cara membuat tombol like facebook twitter dan google+ ini di blog sya
sehingga bukan hanya sekedar menulis artikel tanpa mencoba di blog
sendiri tau cuma sekedar copy paste artikel aja sehingga pastinya
tutorial ini bisa diterapkan di blog sobat
Sebelum sya kasih tipsnya adabaiknya sobat bsa lihat contoh sreenshoot nya disamping kiri blog ini dan berikut tutorialnya :
- masuk ke akun blog sobat dlu
- setelah masuk buka dasboard lalu cari tata letak
- kemudian tambahkan gadget lalu tambahkan html/javascript dan pilih dimana saja terserah sobat tpi saran saya di smping kanan postingan jika templates sobat 2 kolom atau smping kiri klo templates sobat ada 3 kolom
<!--SideBar Floating Share Buttons Code Start-->
<style>
#pageshare {position:fixed; bottom:15%; left: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://4cnb.blogspot.com/2013/06/like-melayang-di-blog.html">Get This</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div></div>
<style>
#pageshare {position:fixed; bottom:15%; left: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://4cnb.blogspot.com/2013/06/like-melayang-di-blog.html">Get This</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div></div>
Setelah sudah lalu save dan untuk melihatnya coba buka blog sobat pastinya sudah terpasang tombol like facebook twitter dan google+.
Pada
teks yang berwarna merah sobat bisa ganti dengan link html sobat agar
pengunjung blog sobat ingin mencoba gadget ini (get this)
Apabila
tutorial ini tidak bsa diterapkan di blog sobat silahkan beri komentar
sehingga sya bisa kasih solusinya,terimakasih sudah berkunjung di blog
ini semoga bisa bermanfaat artikel ini.wassalamualikum