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%2Fkangismet.net&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%2Fkangismet.net 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

39 komentar

mantab nih... ijin nyoba ya om.... :)

Balas

thx kang ismet, ane coba ah :-* :D

Balas

maaf gan kok saya gabisa yah... klo d klik floating like'y malah ada tulisan Could not retrieve id for the specified page. Please verify correct href was passed in.
gmna solusinya gan

Balas

sama saya seperti cepp rizal..buntu ni

Balas

sama saya seperti cepp rizal & Hendru ..buntu ni

Balas

bang, mau tnya nih ! gimana caranya supaya letaknya dikiri ? soalnya sdah saya coba-coba tp nda berhasil bang ! mohoh dibantu ya bang,

Balas

coba ganti dengan float:left

Balas

ga bisa float leaf jg ga bisa
boss

Balas

gimana donk apa bisa di bantu

Balas

"Could not retrieve id for the specified page. Please verify correct href was passed in"
. cuma ada ini

Balas

gan dah bisa makasih banyak ya nanti saya mampirlagi dan tolong bantu ya om juragan

Balas

terimakasih bang boleh dicoba juga ilmunya...

Balas

Sip sob... jangan lupa balik lagi kemari :)

Balas

Syukur deh kalau udah g ada masalah...

Balas

mantap kang, ntah ane coba deh ni triknya

Balas

wahh berat ga om kalo blog dipasaingin trik ini?

Balas

makasih mas sharingnya, akan saya coba...

Balas

maksaih om,,cocok untuk blog yg templatenya kecil seperti punya ane,,jd gak menuhin tempat

Balas

Terimakasih atas tips-nya
salam knal aja buat semuanya
www.anfilem.blogspot.com

Balas

sudah kupasang bang,,, ditunggu kunjunganya

Balas

yang lengkap dengan tombol twitter dan bloggernya gmn mas

Balas

kayaknya tinggal nambah kode sob :)

Balas

Tq...sdg coba...visit http://vitaminvortexshaklee.blogspot.com/p/anyaman-buluh.html?m=0

Balas

Sugah berhasil ya? templatenya pake mobile ya bu.. kereeen :)

Balas

pengen nyoba tapi lihat-lihat dulu.. :)
terima kasih pak sharingnya

Balas

Kang ismet blogmu membantu banget.. :D hahaha

Balas

kang kaloq buat like box sama followers valid html5 gimana..??

Balas

kang mau tanya nih,gimana caranya agar like box diam mengikuti scroll seperti punya mas ismet?

Balas

pake cara ini http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html

Balas

thanks buat tutorialnya
juntak01.blogspot.com

Balas

-_- saya juga udah buat posting ginian, tapi gak ada yang datang ngunjungin.. sedih rasanya T_T
aboutdoublr.blogspot.com

Balas
Komentar ini telah dihapus oleh pengarang.

Poskan Komentar


×
Chat