Cara Memasang Widget Share Button

Posted by Denie Deden_Nz

 

Apa kabarnya, sob? sehat? Basa basi dulu ya, sob hehehe. Postingan malam ini saya akan share mengenai cara pemasangan widget share button melayang di blog dan yang tentunya untuk para master pasti mesem-mesem mengenai widget ini hehehe..tapi untuk para newbie kayak saya memasang widget ini menarik sekali biar lebih bagus siih tampilan blognya. 

Salah satu fungsi dari widget ini yaitu sebagai media share untuk mempermudah pengunjung blog untuk bisa share artikel yang di sukai ke situs sosialnya.

Selain fungsi diatas tadi, widget share button ini juga merupakan termasuk salah satu unsur pendukung SEO dalam peningkatan traffic serta Backlink. Begitu kata para master blogger, sob.

Oke kita langsung sedoot aja ya, sob. Biar nggak lama untuk masangnya di blog sobat. Ikuti langkah-langkah di bawah ini:

• Masuk ke Dasbor blog sobat

• Pilih Rancangan

• Pilih Tambah Gadget / Add Gadget

• Pilih HTML / Java script

• Copy kode HTML di bawah ini

<!--Widget Share Button Melayang 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="bagikan ke teman anda">

<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://flamboyan68.blogspot.com/2012/12/cara-memasang-widget-share.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">Widget by flamboyan68<font></font></font></a></div>

</div>

<!--Widget Share Button Melayang End-->

•  Lalu Pastekan di HTML/ Java Script tadi

• Simpan

• Selesai dan lihat hasilnya di blog sobat

Untuk melihat hasilnya Klik disini tampilan akan tampak sama seperti yang ada pada Blog saya ini. Note: Apabila sobat ingin meletakkan di posisi sebelah kiri, sobat tinggal merubah tulisan right menjadi left, mudah khan?

Alhamdulilah akhirnya selesai juga, mudah-mudahan bisa bermanfaat bagi sobat-sobat semua, selamat mencoba dan sampai jumpa..