Floating Fan Page Facebook merupakan widget yang kita tambahkan
pada blog untuk mempercantik tampilan blog sekaligus menata dengan rapi
widget-widget yang sudah terpasang pada blog. Sebelumnya saya juga sudah
pernah bahas tentang
cara memasang like box facebook widget pada blog. Dan pada kesempatan kali ini, saya akan memberikan tips blog lagi yaitu
Cara Memasang Floating Fan Page Facebook Pada Blog. Sebagai gambaran awal dari
Floating Fan Page Facebook pada blog,
teman-teman bisa melihat contohnya pada widget fan page yang saya sudah
pasang pada blog ini. Pemasangan widget fan page ini tidak akan
berjalan dengan lancar bilamana teman-teman blogger belum membuat
halaman fan page pada facebook sebelumnya. Untuk itu, silakan buat dulu
halamannya. Dan untuk membuat halaman fan page pada facebook, silakan
tanyakan saja pada Om Google.
Untuk teman-teman blogger yang sudah punya halaman fan page pada
facebook dan ingin memasang widget floating fan page facebook pada blog,
silakan ikuti langkah-langkahnya di bawah ini :
- Silakan login ke akun blog Anda.
- Pada halaman dasbor akun blog, silakan klik nama blog Anda.
- Kemudian pada halaman overview blog Anda, silakan pilih template-edit HTML-Prossed-expand widget template.
- Selanjutnya silakan cari kode ]]></b:skin>.
- Kalau sudah ketemu kodenya, silakan copy dan paste kode di bawah ini pas di bawah kode ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
6. Selanjutnya silakan simpan template blog Anda dan tutup juga halaman edit HTML-nya.
7. Kemudian silakan pilih lagi layout, lalu pilih dan klik Add Gadget pada posisi mana saja.
8. Setelah muncul windows Add Gadget Blogger, silakan pilih HTML/JavaScript dengan cara klik tombol plus [+] yang ada disebelah kanannya.
9.Langkah selanjutnya, silakan copy kode di bawah ini dan paste pada bagian content.
<script type="text/javascript"> /*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".likebox").hover(function()
{jQuery(this).stop().animate({right: "0"}, "medium");}, function()
{jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/ </script> <style type="text/css">
.likebox{background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Tozc6y8VlWmFWjhesfZysHmDFJEWybSNGbljdE-ofQGeTCyqck0jZ4EKl9BwriI_Zn4QjdgaDSycBS8APXDjY8EYos4sC_hlgOdVAbCznkhwSm8So173fwsJ11YeN4GL2nzPiy4zNmmn/s1600/fb.png")
no-repeat scroll left top transparent !important;display: block;float:
right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:
99999;position:fixed; right:-250px;top:44%;} .likebox
div{border:none;position:relative;display:block;} .likebox span{bottom:
12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position:
absolute;right: 7px;text-align: right;z-index: 99999;} .likebox span
a{color: gray;text-decoration:none;} .likebox span
a:hover{text-decoration:underline;} </style> <div
class="likebox" style=""> <div> <iframe
src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/sinauaja&width=240&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=258"
scrolling="no" frameborder="0" scrolling="no" style="border: medium
none; overflow: hidden; height: 258px; width:
245px;background:#fff;"></iframe> </div> </div>
- Setelah dipaste kodenya pada bagian content, jangan dulu disimpan kodenya tapi silakan ganti kode yang saya kasih warna merah dengan alamat atau URL halaman fan page facebook Anda. Setelah diganti kode yang berwarna merah, barulah disimpan kodenya.
Ok sob, selamat ya, sudah berhasil
Memasang Floating Fan Page Facebook Pada Blog. Jika ada kendala, silakan tanyakan saja lewat komentar atau buku tamu blog ini.
Sumber :
http://agungtalaga.blogspot.com/2012/04/memasang-floating-fan-page-facebook.html
