Membuat Widget Like Facebook Melayang New Version
Selamat sore sahabat blogger semuanya. Kami membagikan sebuah trik yang biasa kita jumpai ketika masuk ke Blog Lora Malunk seperti Widget Like Facebook Melayang.
Kemarin saya sempat membahas mengenai "Cara Membuat Like Box Facebook dengan Efek Hover Jquery". Cuma cara itu sangat membingungkan bagi sahabat blogger yang baru belajar ngeblog. Kali ini saya mempunyai trik yang sangat portebel mengenai Membuat Widget Like Facebook Melayang New Version.
Trik ini tidak sama Tips and Trik yang kita jumpai di Blog Lora Malunk. Contoh awal coba anda baca artikelnya dan perhatikan Tips yang saya tulis berikut ini : Klik Membuat Ads Popup Dengan Efek Jquery
Kalau anda sudah membaca dan memperhatikan Tips and Trik di atas. Sekarang perhatikan Code Script yang saya rubah dan saya revisi, agar hasilnya bisa sempurna. Dan lihat perbedaannya Code Script Membuat Ads Popup Dengan Efek Jquery dan Code Script Membuat Widget Like Facebook Melayang New Version, sangat berbeda.
Berikut Tips-Nya :
Langkah 1
Masuk ke Menu Rancangan
Langkah 2
Tambah Gadget HTML/JavaScript
Langkah 3
Copy Paste Kode dibawah ini dan Simpan lihat hasilnya
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
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:#eee2e2; 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'>
<--------KODE SCRPIT LIKE FACEBOOK DI SINI--------->
<a class='close' href='#'>×</a>
</div>
Sekian Tips and Trik kali ini. Semoga bermanfaat buat kita semua. Amin
