Cara Membuat Widget Sosial Share Blogger Melayang Sebelah Kiri

Bagikan :

Facebook

Tweet

Linkedin

Pinterest

Cara memasang tombol share melayang di sebelah kiri blog ini akan mempermudah pengunjung blog untuk membagikan artikel sobat ke sosial media seperti facebook, twitter dan google plus. Cara membuat tombol share melayang di blog akan sangat memberikan manfaat salah satunya meningkatkan pengunjung dan menambah daya tarik blog. Cara membuat widget sher melayang di sebelah kiri blog sudah tidak asing lagi bahkan hapir semua blong menggunakan widget ini. Fungsi utama widget ini adalah untuk share artikel sobat ke jejaring sosial.

Langsung saja Cara membuat widget sosial share melayang di sebelah kiri
1. Silakan sobat login ke blogger
2. Pilih Layout/ Tata Letak
3. Pilih Add a gagdet yang ingin kamu letakan widget
4. Pilih HTML/JavaScript

<style>
#ekamdtsharebtn {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;}
#ekamdtsharebtn .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){#ekamdtsharebtn{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='ekamdtsharebtn' 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>

5. Masukan Kode di atas ini
6. Pilih Save, dan lihat hasilnya... Widget sosial share telah terpasang di blog sobat.

Salam Blogging.....

Tag : Blog