Cara membuat Like Box Melayang keren dengan ukuran tidak terlalu besar
Salam hormat bagi sahabat semua sesuai degan judul kali ini saya akan menjelaskan bagaimana Cara membuat Like Box Melayang keren dengan ukuran tidak terlalu besar
penampakannya |
- seperti biasa masuk dulu ke dasbor blogger sobat atau di sini lebih cepat
- klik tata letak > tambah gadget > pilih HTML/javascript
- masukkan kode berikut
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -183px;
width:310px;
height:auto;
padding:10px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#000000; 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:#00000;">Silahkan Sob,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fgenerasipemulanewbie&width&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:100px;" allowtransparency="true"></iframe>
<!-- Selesai --!><a class='close' href='#'>×</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://kumpulan-adsen.blogspot.com/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://bos-tutorial.blogspot.com/2013/07/inilah-memasang-widget-like-box.html">Get This Widget</a></p>
</div>
<a href="http://www.facebook.com/netsigli"></a>
NB: ganti tulisan warna merah dengan kode fp sobat
semoga bermanfaat . . .
cara mengetahui kode fp klik di sini
cara mengetahui kode fp klik di sini
WASSALAM
mantab.. terimakasih banyak buat script tutorialnya...
BalasHapussama-sama
BalasHapus