Cara Membuat Widget Like Box Facebook Melayang di Blog - Halo teman blogger kali ini saya akan share cara memasangkan kotak like Facebook yang
dapat melayang di blog. Selain melayang, like box ini juga akan muncul
secara tiba - tiba dari arah bawah ke atas.
Saya rasa hal ini sangat perlu dilakukan oleh teman - teman blogger
semuanya, mengingat bahwa pentingnya like box ini. Para pengunjung bisa
dengan leluasa mendapatkan postingan - postingan terbaru dari blog anda
setelah mereka menekan / mengklik tombol Like.
Jadi gimana teman? Mau mencoba pasang like box melayang ini? Sebagai
contohnya pada blog teman saya ini.>>>
langsung saja ke langkah - langkah pemasangannya.
langsung saja ke langkah - langkah pemasangannya.
Perhatikan ya :)
1. Pertama sobat wajib mempunyai Halaman Blog sobat di Facebook dan
script Widget Like Box Facebok-nya. Silakan baca artikel tentang Cara Membuat Halaman Blog di Facebook dan Cara Membuat Widget Like Box Facebook di Blog untuk mendapatkan scriptnya.
2. Kalau sobat sudah mempunyai Halaman Blog sobat di Facebook dan telah mendapatkan script-nya, sobat bisa mulai memasang widget ini. Login ke akun Blogger sobat.
3. Masuk pada bagian Tata Letak.
4. Klik Tambahkan Gadget di posisi mana saja tidak jadi masalah. Karena hasilnya tetap akan melayang di halaman Blog.
5. Pilih mode HTML/Javascript.
6. Masukan kode berikut.
Kode script Facebook Like Box melayang :
2. Kalau sobat sudah mempunyai Halaman Blog sobat di Facebook dan telah mendapatkan script-nya, sobat bisa mulai memasang widget ini. Login ke akun Blogger sobat.
3. Masuk pada bagian Tata Letak.
4. Klik Tambahkan Gadget di posisi mana saja tidak jadi masalah. Karena hasilnya tetap akan melayang di halaman Blog.
5. Pilih mode HTML/Javascript.
6. Masukan kode berikut.
Kode script Facebook Like Box melayang :
<!-- 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:310px;
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:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
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>
<script type='text/javascript'>
$(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;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Dapatkan postingan terupdate via Facebook setelah anda mengklik tombol,<blink> Like</blink> dibawah</p><br/>
<!-- Mulai --!>
-----Letakan Script Widget Like Box Facebook disini-----
<!-- Selesai --!><a class='close' href='#'>×</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Pantengin terus <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://lirikdulu.blogspot.com">Blog Lirik Dulu</a></p>
</div>
Masukan script Widget Like Box Facebook yang telah sobat dapatkan pada tulisan berwarna merah (hapus tulisan berwarna merah). Ubah tulisan berwarna biru dengan pesan-pesan pada widget yang sobat inginkan. Script di atas memuat kode-kode warna, ukuran dan posisi yang bisa sobat ubah sesuai keinginan. Namun tidak diubah pun sudah bagus, posisinya berada tepat ditengah halaman. Hasilnya akan terlihat seperti ini.
Tidak ada komentar:
Posting Komentar