Membuat Floating Facebook Like Box di Blog



Floating Facebook Like Box atau kalau diartikan Kotak Suka Facebook yang Melayang (rancu ya?). Ya.. saat saya mencoba memberikan tutorial tentang Cara Membuat Floating Facebook Like Box di Blog, seperti yang terlihat di sebelah kanan blog ini.


Biasanya kita memasang FB Like Box ini di sidebar atau bottom bar. Tentunya hal ini bertujuan supaya blog atau web kita lebih dikenal, dan akhirnya traffic akan meningkat. Akan tetapi apabila kita scroll mouse ke atas atau bawah, FB Like Box pastinya ini tidak terlihat. Atau mungkin kita kebingungan untuk menempatkannya, karena kehabisan space.

Yup, ini dia cara pembuatan Floating Facebook Like Box di Blog.

Menambahkan Jquery Plugin
1. Login ke Blogger
2. Klik Dasbor>Rancangan>Edit HTML
3. Cari kode
</head>
4. Tambahkan kode ini diatas </head>

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

Abaikan langkah ini apabila template anda sudah terinstall Jquery Plugin.

Menambahkan Kode HTML pada Widget
1. Klik Dasbor>Rancangan>Tambah Gadget>HTML/JavaScript
2. Copy kode dibawah ini

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FOopzShootz&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://blog.kangismet.net/2011/11/membuat-floating-facebook-like-box-di.html" target="_blank">+Get This!</a></span></div></div>

3. Ganti http%3A%2F%2Fwww.facebook.com%2FOopzShootz dengan Facebook Fan Page Anda.
4. Save

Mohon Dibaca!!!

Sebelum menyimpan URL Facebook anda, ganti kode-kode pada URL.
: dengan %3A
/ dengan %2F

Misalkan URL Facebook anda :

http://www.facebook.com/pages/fbanda/123456

menjadi

http%3A%2F%2Fwww.facebook.com%2Fpages%2Ffbanda%2F123456


Selamat mencoba, semoga sukses !!
Previous
Next Post »

3 comments

Click here for comments
Anonymous
admin
December 27, 2012 at 11:15 AM ×

Нi there! I unԁerstand this is sort οf off-toрic hοwever Ӏ hаԁ to ask.

Doеs running a well-estаblished blog
lіκe youгs require a lοt of work?

I'm completely new to running a blog but I do write in my journal every day. I'd likе tо
start a blog so I сan share my own expeгience and viеwѕ online.
Please let me know if you have anу kind of ideas oг tips for brand new aѕpiring bloggеrs.
Thankyou!httρ://dj.beatρort.cοm/evеnts/40110
Also visit my website ; Watch Downton Abbey Season 3 Episode 0 Series 3 Christmas Special Online Free Stream

Reply
avatar
Anonymous
admin
January 6, 2013 at 8:08 PM ×

Hey! Someοne іn my Fасeboоk grouρ shareԁ thiѕ
site with us so I cаmе to look it oveг.

I'm definitely loving the information. I'm booκmarking and will be tωeetіng this to
mу followers! Fantaѕtіc blog and superb stуle and design.
http://tνshowonlinе010613.orbs.com/Young+Justіce+Online+Seаson+2+Episoԁe+10
Here is my web blog : Young Justice Season 2 Episode 10 Before the Dawn

Reply
avatar
Anonymous
admin
January 6, 2013 at 9:08 PM ×

You can definitely see yοuг enthusiasm in thе articlе yοu wгite.
The world hopeѕ for even more ρassionate wrіteгs like уou who аren't afraid to mention how they believe. At all times follow your heart.http://tvshowonline010613.orbs.com/The+Clone+Wars+Online+S5+Episode+12
Also visit my homepage - The Clone Wars Season 5 Episode 12 Free Stream

Reply
avatar

Mohon dengan sangat untuk berkomentar dan saran demi kemajuan bersama,, beri kritik yang bermanfaat dan jangan lupa join blog ini..!
oke??? terima kasih :) ConversionConversion EmoticonEmoticon

Thanks for your comment