- Back to Home »
- Blogspot , tips dan trik »
- Membuat Tombol Share, Like dan Tweet Melayang di Blog
Posted by : Nur Rokhman
Senin, 27 Agustus 2012
Tombol share sosial media sangat penting untuk blog kita, karena share button seperti like facebook dan tweet cukup ampuh dalam mendongkrak popularitas dan kunjungan ke blog kita. Apalagi buat newbie blogger seperti saya ini. Juga membantu kepada pembaca untuk membagi artikel kita ke media yang lain, seperti share di facebook, share di twitter, digg dll.
Membuat tombol sosial media dalam blog saya rasa jadi sebuah kewajiban bagi para blogger, nah kali ini saya akan memberikan tentang cara membuat tombol share melayang di blog seperti yang terdapat di blog saya ini, lihat gambar dibawah ini!
Gambar diatas menampilkan banyak kombinasi tombol share di blog, like facebook, share facebook,twitter juga digg. sudah cukup lengkap kantombol share melayang diatas?
Lalu bagaimana cara membuatnya atau memasangnya pada blog kita? ikuti tutorial dibawah ini:
Cara membuat tombol share melayang di blog sebagai berikut :
<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://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: 12px;text-align:center;"><a href=" http://cnoeng.blogspot.com/2012/08/membuat-tombol-share-like-dan-tweet.html " target="blank"><font color="black">[Get This]<font></font></font></a></div></div>
Gambar diatas menampilkan banyak kombinasi tombol share di blog, like facebook, share facebook,twitter juga digg. sudah cukup lengkap kantombol share melayang diatas?
Lalu bagaimana cara membuatnya atau memasangnya pada blog kita? ikuti tutorial dibawah ini:
Cara membuat tombol share melayang di blog sebagai berikut :
- Masuk ke blogger kamu.
- Klik Rancangan.
- Tambah gadget dan pilih HTML/Javascript.
- Lalu copy dan paste kode dibawah ini.
<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://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: 12px;text-align:center;"><a href=" http://cnoeng.blogspot.com/2012/08/membuat-tombol-share-like-dan-tweet.html " target="blank"><font color="black">[Get This]<font></font></font></a></div></div>
5. Kemudian klik simpan.
Demikian sedikit ilmu semoga bermanfaat bagi kalian, tinggal berkreasi aja..
Demikian sedikit ilmu semoga bermanfaat bagi kalian, tinggal berkreasi aja..