Cara Gampang Membuat Tombol Sosial Melayang di Blog

Sosial share, sebelum saya menshare cara memasang sosial share melayang di blog, saya membahas sedikit tentang sosial share terutama fungsi sosial share tersebut, banyak manfaat bila blog anda tersebut terpasang sosial share, mungkin bila pengunjung suka dengan blog / artikel yang ada di blog anda tersebut bisa share ke publik entah melalui facebook dll melalui sosial share yang anda pasang di blog tersebut, nah langsung saja untuk cara memasang sosial share bisa lihat di bawah ini.

  • NB: mungkin banyak bentuk dan model sosial share tersebut, banyak warna maupun model dan juga penempatan yang berbeda-beda, namun yang saya bagikan kali ini adalah sosial share yang melayang di blog dengan posisi pada sebelah kiri blog anda, untuk contoh gambar script sosial share yang saya bagikan seperti di bawah ini.

Cara Gampang Membuat Tombol Sosial Melayang di Blog

Untuk cara pemasangan bisa anda lihat di bawah ini.
  • Login di blogger anda.
  • Buka menu tata letak.
  • Tambahkan gadget HTML dan letakan di mana aja sesuai keinginan anda sendiri.
  • Dan untuk sript sosial share , bisa anda copy di bawah ini. dan masukan pada gadget HTML tersebut
<!--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://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://rocket4rt.blogspot.com" target="blank"><font
color="black">[Get
This]<font></font></font></a></div>
</div>
  • Terakhir tinggal anda save pengaturan dan lihat hasilnya.
  • Semoga bermanfaat
Bagi sobat yang mau bertanya atau diskusi seputar topik ini silahkan bisa gabung di Forum
Previous
« Prev Post

Related Posts

Posting Komentar