Cara Membuat Widget Share Artikel Melayang Di Sebelah Kiri Blog

Cara Membuat Widget Share Artikel Melayang Di Sebelah Kiri Blog - Sobat idrisbrowsingan, Bagaimanakah kabar sobat semuanya? Semoga aja kita semua masih dalam karunia rahmat, hidayah dan lindungan Allah SWT. Mungkin sobat pernah berkunjung atau melihat tampilan blog yang ada menu share artikel melayang di samping kanan atau kiri blog. Pada kesempatan kali ini idrisbrowsingan akan bagikan tutorial cara membuat widget share artikel di sebelah kiri blog melayang.

Suatu blog terlihat lebih bagus dan profesional dengan adanya menu share melayang di kanan atau kiri blog sehingga memudahkan pengunjung untuk langsung share atau bagikan arttikel blog tersebut. Tombol menu share artikel melayang di blog pastinya udah ga asing lagi yah terutama buat sobat blogger. Selain membuat tampilan blog lebih bagus dan memudahkan pengunjung share langsung artikel blog, tombol share artikel melayang tersebut juga bisa menambah visitor sebuah blog.

Mungkin udah banyak yang share atau membahas tentang widget atau tombol share artikel melayang di sebuah blog, akan tetapi ga ada salahnya juga kan kalau idrisbrowsingan kembali mengulasnya disini. Langsung saja yah sob, ngga usah mondar mandir nanti malah pusing 7 keliling. Inilah cara membuat atau menambahkan tombol share artikel melayang di sebelah kiri blog, yaitu :

• Login akun Blogger.
• Pilih pengaturan Layout ( Tata Letak) dan pilih add gadget dimana kita akan memasang widget.
• Pilihlah add widget HTML/Javascript.
• Copy kode html dibawah ini untuk membuat tombol share artikel melayang sebelah kiri blog, yaitu :

<style>
#idrisbrowsingansharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}

 #idrisbrowsingansharebtn .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;}
@media screen and (max-width:480px){#idrisbrowsingansharebtn{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
</style>
<div id='idrisbrowsingansharebtn' 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='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>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

• Masukan kode html diatas bawah ini pada kotak add HTML/Javascript tersebut.

• Kemudian pilih save dan lihatlah hasilnya. Jika sudah muncul menu widget share artikel disebelah kiri blog, berarti udah sukses yah.

Demikianlah sobat semuanya, pembahasan kali ini tentang cara memasang atau menambahkan tombol widget share artikel di sebuah blog. Semoga artikel blogging ini bisa menambah pengetahuan dan bermanfaat bagi kita semua. Jangan lupa yah, share atau bagikan artikel tentang widget melayang pada sebelah kanan atau kiri blog, pantau terus setiap update artikel dalam blog ini.