Tutorial Cara Membuat Like Box Facebook di Blogger Dengan Efek jQuery

Tutorial Cara Membuat Like Box Facebook Diblogger Dengan Efek jQuery - Apa sih bedanya like box biasa dengan jQuery ? Bedanya adalah jika like box kita tambahkan efek jQuery akan terlihat lebih bagus dan dapat menampilkan efek seperti pantulan bola, keren kan. Kalo penasaran buat aja sendiri di blog ente.

Berikut tutorial mengenai Cara Membuat Like Box Facebook di blogger Dengan Efek jQuery.
Ikuti 2 Cara dibawah ini :

Cara Pertama (1)

1. Login ke Blogger anda masing-masing
2. Klik menu "Template" kemudian klik "Edit Template"
3. Cari kode </body>
4. Kalo sudah ketemu masukan kode dibawah ini tepat di atas kode </body>

// animasikan nilai top saat halaman telah selesai dimuat

$('#kotak-pesan').animate({top:"190px"}, 1000, "easeOutBounce");

// hilangkan kotak pesan saat tombol (x) diklik

$('a.close').click(function() {
$(this).parent().slideUp(800, "easeOutBounce");
return false;
});
});
</script>
<style>
#kotak-pesan{
position:fixed !important;
position:absolute; /* IE6 */
top:-900px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:10px;
background:#E9CF5F;
border:2px solid #fff;
font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);

}

#kotak-pesan 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:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
</style>

Cara Kedua (2)
1. Buat plugin like box nya di situs Developers Facebook (Disini)
2. Yang saya beri tanda warna merah diisi URL Halaman Facebook anda, lihat gambar :

3. Jika sudah selesai men-setting selanjutnya anda klik "Get Code"

4. Maka tampilan akan seperti gambar dibawah ini, copy kode yang paling bawah

Cara Ketiga (3)

1. Masuk ke menu "Layout" / "Tata Letak"
2. Klik tambahkan gadget baru dengan cara klik "Add a New Gadget"
3. Pilih HTML / Javascript
4. Lalu masukan kode yang anda copy tadi
5. Simpan

Jika sudah maka Like Box sudah terpasang dan sudah muncul di blog anda

Oke Sekian Tutorial dari saya tentang Tutorial Cara Membuat Like Box Facebook di Blogger Dengan Efek jQuery. Semoga bermanfaat bagi sobat blogger.
Jangan lupa komen yak

Tutorial Cara Membuat Like Box Facebook di Blogger Dengan Efek jQuery

0 Response to "Tutorial Cara Membuat Like Box Facebook di Blogger Dengan Efek jQuery"

Post a Comment