Widget Sosial Share Melayang Responsive di Blogger

Description: Cara Membuat Widget Sosial Share Melayang di Sebelah Kiri Blog ~ Pada kesempatan kali ini saya akan berbagi cara membuat widget sosial share melayang di sebelah kiri blog. Pastinya sudah tidak asing lagi penting nya tombol share ini di blog atau website yang tentunya bisa meningkatkan jumlah visitor blog, terutama dari teman-teman pengguna sosial profil seperti Facebook, Google Plus, dan sebagainya, misalnya jika artikel kita di share kan bisa menambah pengunjung.

Mungkin sudah banyak yang sudah tau bagaimana cara menambahkan tombol share seperti ini dan mungkin juga ada sebagian yang belum tahu, jadi tidak ada salahnya saya coba posting cara menambahkan tombol share dengan sedikit efeknya keyframe sebelah kiri laman blog, contohnya bisa anda lihat di bawah ini.

Kode Widget  Sosial Share Melayang:

<style>

#seocipssharebtn {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;}

#seocipssharebtn .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){#seocipssharebtn{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='seocipssharebtn' 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>

Cara Memasang Widget Sosial Share Melayang di Blog

1. Di Blogger dan pilig blog yang ingin di pasangi widget ini
2. Pilih Layout > Add a Gadget
3. Pilih HTML/JavaScript:


4. Masukan kode di atas di kolom kotak tersebut
5. Kemudian Save

Media Sosial dan Blog itu saling mendukung. Traffik blog bisa meningkatkan karena kita share atau di-share pengunjung. Sebaliknya, follower dan "liker" akun media sosial juga bisa menambah dengan cara memasang link sosial media kita di blog. Simbiosis mutualisme.

Saya harap anda juga Follow dan Join akun Sosial media saya di bawah, biar kita saling Follow dan like, sekaligus untuk mendukung nya perkembangan blog ini. Semoga bermanfaat bagi anda semua, saya ucapkan Terima kasih ^_^.