Cara Memasang Widget Share Media Sosial di Blog dengan Float

Sahabat Materi7 yang budiman, awalnya saya juga bingung untuk memilih Widget Share Media Sosial di Blog, banyak  cara dan bentuk tampilan yang bias disajikan. Tapi sahabat, dari begitu banyak Widget Share Media Sosial  yang ada, akhirnya saya memutuskan untuk memasang Widget Share Media Sosial  dengan Float dan hasilnya seperti gambar yang tampak dibawah ini.

Cara membuatnya tidak lah susah,  Tutorial ini berasal dari hasil pencarian yang saya temukan, dan saya praktekkan dan ternyata berhasil ditampilkan di blog ini. Kini saatnya berbagi dengan pembaca / pengunjung sekalian, dan alasan utama saya memilih widget ini adalah letaknya yang berada diluar kolom postingan ataupun sidebar. Tapi tampilannya berada di pinggir banget dan berada diruang yang kosong, ini jelas sangat menguntungkan untuk tampilan blog kita.

Nah…, begini langkah-langkah untuk Memasang Widget Share Media Sosial di Blog dengan Float.

1.   Masuk ke Akun Blog anda;

2.   Masuklah ke rancangan / template blog anda pada Tata Letak;

3.   Pilih elemen  Add Widget atau Tambahkan Gadget;

4.   Lalu pilih Add HTML/Javascript;

5.   Copy / salinlah script di bawah ini :

<!--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://materi7ku.web.id" target="blank"><font color="black">Get This<font></font></font></a></div></div>

6.         Simpan Gadget yang ditambahkan,  lalu simpan Template blog anda;

7.         Selesai dan lihat hasilnya.

Lihat juga contoh hasilnya seperti gambar di sebelah kiri web ini.

Demikianlah penjelasan singkat mengenai Cara Memasang Widget Share Media Sosial di Blog dengan Float. Semoga bermanfaat, selamat mencoba dan sukses.