Cara Membuat Like Box Fans Page Fb Melayang
Kali Ini kita akan membuat atau memasang like box fans page facebook melayang di blog atau blogger dan tentunya dengan menyertakan tombol keluar atau close hanya dengan satu klik saja, untuk panduan Memasang Like Box Melayang Di Blog ini akan menghasilkan tampilan seperti pada gambar di samping yang tepatnya like box ini akan tampil setelah loading page selesai yang langsung berada di tengah pada atas halaman blog kita, yang akan kita buat ini ialah like box melayang yang di sertai border/garis dengan menggunakan table yang diberi background warna putih, baiklah mari kita langsung saja menuju langkah-langkah berikut ;
1. Login ke Blogger.com
2. Klik Rancangan
2. Klik Rancangan
3. Di Elemen Laman klik Tambah Gadget
4. Lalu tambahkan HTML/JavaScript
5. Masukan script di bawah ini kedalamnnya
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:60%;
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;">Like ya sahabat blogger :)<blink> makasih </blink> </p>
<!-- Mulai --!>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:60%;
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;">Like ya sahabat blogger :)<blink> makasih </blink> </p>
<!-- Mulai --!>
Isi Dengan Script/code Like Box fans page anda Disini
<!-- Selesai --!><a class='close' href='#'>×</a>
</div>
Penting sob..!!
Jangan lupa taruh Script/code Like Box fans page anda di script tadi..
untuk melihat script nya ada bisa liat disini
semoga postingan saya bermanfaat buat anda :)
Baca Juga Yang Ini, Semoga Bermanfaat Sob!!






7 comments:
terima kasih gan
sip
bisa gan....
boleh juga nie
tipsnya sangat membantu nih,. terima kasih
Terima kasih Infonya Bro, izin ikut menerapkan ya. hehe
Informasi Lowongan Kerja Terbaru BUMN, Persero, Swasta, & Berbagai Perusahaan Besar di Indonesia : http://expocpnsbumn.blogspot.com
mantab.. terimakasih banyak buat script tutorialnya...
Post a Comment
Hmm..Sunyi ni blog saya tanpa comment anda..
comment yukk ^_^