Menambahkan Widget Like Box Melayang

Assalamu’alaikum… Selamat pagi semuanya, kali ini akan saya bagikan artikel bagaimana cara memasang widget Like Box melayang pada Blogger yang kita sayangi, selain memasang, akan saya beri petunjuk bagaimana mengedit html tersebut agar sesuai dengan keinginan anda… So, lets check it out…

Buka halaman facebook yang ingin anda tambahkan sebagai Fan Page.

Buka halaman Developer Facebook.

Isikan data fan page anda pada kolom “Plugin Halaman”.

Pada kolom “URL Halaman Facebook”, copas URL Halaman Facebook anda seperti pada gambar diatas.
Pada kolom tinggi dan lebar kosongi saja, tapi kamu harus mencentang “Sesuaikan dengan lebar wadah plugin” dan “Tampilan wajah teman”.

Kemudian Klik “Dapatkan Kode”

Pilih kolom “Iframe”.

Artikel Terkait : Perangkat Keras Untuk Akses Internet

Jangan di copas dulu…!!!

Kita beralih ke Blogger.

Buka tata letak.

Kemudian pilih “Tambahkan Gadget”.

Kalian bisa memilih dimana saja widget tersebut ditempatkan, karena pada dasarnya nanti widget aka muncul dalam posisi melayang dimana saja.

Pilih “HTML/Javascript”.

Sebaiknya kosongi bagian judul.

Atau kalian bisa mengisinya agar tahu dimana posisi widget tersebut jiak suatu saat kamu ingin mencari dan mengeditnya lagi.

Pada bagian konten, copy paste kode dibawah ini:

<!– FB melayang tombol close –!>
<style type=’text/css’>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:330px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#00FFFF; font:normal 1em Lucida Calligraphy,Lucida Calligraphy,Lucida Calligraphy;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>

$(window).bind(“load”, function() {
// animasikan nilai top saat halaman telah selesai dimuat
$(‘#kotak-facebook’).animate({bottom:”50px”}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$(‘a.close’).click(function() {
$(this).parent().fadeOut();
return false;
});
});

font-size:15px; color:#000000;”>Anda Menyukai Laman Ini?

<!– Mulai -!>

Selesai -!>×
<p style=” float:right; margin-right:35px; font-size:10px;” >Powered By Blogger Widget and <a style=” font-size:10px; color:#3B78CD; text-decoration:none;” href=”http://alifpustaka.blogspot.com/”>Get This Widget

Ganti kode yang berwarna merah dengan iframe yang telah diperoleh pada tahap diatas.
Ganti kode yang berwarna kuning dengan kode warna lain sebagai warna bacground Like Box.
Ganti kode yang berwarna biru dengan kalimat sambutan Like Box.
Ganti kode yang berwarna jingga dengan model hurif yang lain untuk huruf sambutan di Like Box.
Ganti kode yang berwarna ungu dengan ukuran font dari tulisan pada Like Box.

Kemudian Simpan

Sekian informasi yang saya sampaikan. Saya mohon maaf jika ada banyak kesalahan. Jika ada yang ingin disampaikan dan ditanyakan, kolom komentar kami terbuka untuk anda. Sampai jumpa lagi, Assalamu’alaikum…