Tutorial blogger
» » » Memasang Widget Sosial Melayang di Blogger

Memasang Widget Sosial Melayang di Blogger

Kali ini Saya akan membahas bagai mana Cara Meletakan Widget Media Sosial Melayang/Terbang di Blogger, Tentunya kita tidak asing lagi dengan widget yang satu ini, kita sering melihatnya ketika kita berkunjung ke blog", Tombol share ini tentunya dapat meningkat kan  visitor blog kita, Terutama teman teman yang mengunakan sosial media seperti facebook, google plus dan sebagainya.

Mungkin sudah banyak postingan yang membahas tentang topik ini, Dan kemungkinan juga masi banyak yang belem tau jadi tidak ada salah nya jika saya mempostingkan cara menambahakan tombol sosial share dengan sedikit efek keyframe di bagian kiri laman blog, Contoh nya bisa di lihat di gambar 

  • Kode Html Widget Sosial Melayang
<style>
#seocipssharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#4c4747;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 Melayang di Blogger/Blogspot
  1. Di Blogger Pilih blog yang mau di pasang widget
  2. Pilih Tata Letak kemudian Tambah gadget 
  3. Akan muncul pop up windows, lalu klik Tanda + Html/Java Script

      4. Masukan Kode Html yang ada di kotak di atas 
      5. Save dan Selesai, Kini widget share sosial media telah terpasang di blog kamu. ^^
Tag : blogger, Tutorial
0 Komentar untuk "Memasang Widget Sosial Melayang di Blogger"

Back To Top