Halo sobat, saya kali ini akan share artikel tutorial bagaimana cara membuat like box fanspage melayang di blog sobat atas request-an dari sobat blogger Abdul Ro'uf . Nah, dari beberapa hal yang terkandung dalam fanspage sudah saya jelaskan pada artikel sebelumnya pada dasarnya tujuan Memasang Widget Like Box Facebook Melayang di Blog adalah supaya para pengunjung blog/blogger lain mau menyukai halaman facebook/fanspage yang kita kelola dengan memberikan jempolnya/like, sehingga halaman halaman facebook yang anda kelola semakin banyak. Kelebihan lain dari widget ini dilengkapi dengan tombol close sehingga pengunjung bisa dengan mudah menutup Kotak Widget ini dan walau pun agak sedikit mengganggu pengunjung tapi masih bisa menutupnya tanpa susah payah.
Dan kini saya akan langsung menunjukkan bagaimana cara membuatnya. Caranya pun sama dengan membuat wdget lainnya pada tutorial fanspage sebelumnya:
- Pertama masuk ke blog sobat
- langsung ke menu Tata Letak
- Klik Tambahkan Gadget
- Kemudian masukkan kode dibawah ini
<!-- 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;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>
<div class="fb-like-box" data-href="https://www.facebook.com/SeptinoBlacxer" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>
<!-- 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://septinoblacxer.blogspot.com/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://septinoblacxer.blogspot.com/2016/01/cara-gampang-membuat-like-box-melayang.html">Get This Widget</a></p>
</div>
Keterangan : Ganti kode yang berwarna biru dengan URL Fanspage sobat
- Jika sudah lalu Save.
Demikianlah tutorial yang saya buat semoga bermanfaat bagi sobat dan juga bisa memenuhi request dari sobat blogger yang membutuhkan. Terima kasih.
EmoticonEmoticon