Computer Tutorials | Infotech | Software | Games | Ebook | Tips & Trick Blogger

Memasang Widget Floating Facebook Like Box Di Blogspot

Floating-Facebook-Like-Box-Widget
Memasang Widget Floating Facebook Like Box Di Blogspot - Belum lama ini Saya menemukan script keren untuk widget blog Raagam Beritaku ini. Widget Facebook Like Box yang biasanya terlihat agak "kaku", kini bisa dipasang melayang (float) di sebelah kanan blog tepatnya pada bagian sidebar. 


Selain lebih fleksibel, widget ini juga sedikit lebih menarik karena tampilannya yang memang akan sedikit "memaksa" orang yang mengklik nya. Demo-nya bisa kamu lihat di sidebar blog ini.


Tutorial memasang widget floating facebook like box di blogspot


Langkah Pertama
Sebelumnya pasang dulu kode JQuery Library di template blog Kamu. Jika sudah memasangnya silahkan lewati langkah ini. Berikut cara pemasangannya:

  • Silahkan menuju menu Template > Edit HTML
  • Klik Lanjutkan, kemudian centang Expand Template Widget
  • Kemudian copy kode berikut


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>


  • Kemudian paste di bawah kode <head>

Langkah Kedua

  • Silahkan menuju menu Tata Letak > Tambah Gadget
  • Pilih menu HTML/JavaScript
  • Paste kode di bawah ini pada kolom yang tersedia



 <script type="text/javascript"> 
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FUsernameFanPage&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://ragam-beritaku.blogspot.com">Ragam Beritaku</a></span></div></div> 


  • Jangan lupa ganti UsernameFanPage dengan username Fan Page Facebook kamu. Jika belum punya maka segeralah Kamu membuat Fan Page nya.
  • Kemudian Klik Save dan lihatlah hasilnya

Jika ada teman blogger yang kesulitan dalam memasang widget floating facebook like box di blogspotsilahkan untuk bertanya di kotak komentar yang telah tersedia. Salam blogger :)




Other link :

Share on...

0 comment on Memasang Widget Floating Facebook Like Box Di Blogspot :

Post a Comment and Don't Spam!