.bmp "Floating Facebook Like Box Widget")
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0bFP6Ue3q547i8HEZSxk8OCSRy_OjoEycKmXjovWdEjw-G5A5Hg1pZ45VhCQyE7fBtSxjoGzNsPbH0XlI74HpzVFNpJVVC6142ZxR5ZcFdWKy2l_VgDe6yarZyp8fcrrUQ379caPSyEsO/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&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&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>
//<!--
$(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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0bFP6Ue3q547i8HEZSxk8OCSRy_OjoEycKmXjovWdEjw-G5A5Hg1pZ45VhCQyE7fBtSxjoGzNsPbH0XlI74HpzVFNpJVVC6142ZxR5ZcFdWKy2l_VgDe6yarZyp8fcrrUQ379caPSyEsO/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&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&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 blogspot, silahkan untuk bertanya di kotak komentar yang telah tersedia. Salam blogger :)
0 comments:
Post a Comment