Cara memasang kotak like facebook melayang pada blog ~ Anak Dunia

Minggu, 14 Juli 2013

Cara memasang kotak like facebook melayang pada blog

seperti yang sudah saya share widget facebook likebox sebelumnya berbeda dengan yang saya akan share kali ini karena widget yang ini muncul dari bawah setelah loading blog selesai sehingga tidak sedikit menganggu. widget ini adalah salah satu widget inik yang paling saya sukai karena terlihat cantik pada blog yang menarik pengunjung untuk melike facebook fanpage sobat, dan juga ini merupakan salah satu trik untuk menggaet pengunjung blog dengan tidak menyiayiakan pengunjung pertama untuk melike facebook likebox sobat, seperti yang saya sudah jelaskan pada postingan saya sebelumnnya widget ini berguna untuk menampung para facebook liker pengunjung dan memberikan pemberitahuan artikel untuk lebih jelasnya baca artikel saya

Facebook like box series

Part1: Cara membuat fanpage facebook (jika sobat belum mempunyai fanpage facebook)

Part2: cara membuat facebook like box (opsi)

Part2: Cara membuat facebook likebox muncul dari bawah (sobat sedang membaca ini)

berikut panduan untuk memasang facebook likebox ini pada blog sobat, ikut panduannya ya :D

Cara memasang pada blog

1. login blogger
2. tata letak >> tambah gadget >> html/javascript
3. copy paste script berikut

<style type='text/css'>
#fblikebox {
overflow:display;
position:fixed !important;
bottom:-1000px;
left:50%;
width:300px;
height:auto;
margin:0 0 0 -182px;
padding:16px;
border:4px solid #1871ff;
border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;
font:normal normal 13px Cambria,Georgia,Serif;
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
background-image: linear-gradient(to top, #FFFFFF 0%, #00A3EF 100%);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
}
#fblikebox::after, #fblikebox::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#fblikebox::before {
border-top-color: #1871ff;
border-width: 15px;
left: 10%;
margin-left: -5px
}
#fblikebox::after {
border-top-color: #FFF; /* Samakan dengan warna background */
border-width: 9px;
left: 10%;
margin-left: 1px
}
#fblikebox a.close {
position:absolute;
top:-10px;
right:-10px;
background-color:#333;
font:normal bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:25px;
text-align:center;
color:white;
border:2px solid #1871ff;
border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#fblikebox').animate({bottom:"100px"}, 1000);
// hilangkan kotak pesan saat tombol (x) diklik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
//]]>
</script>
<div id='fblikebox'>
<!-- likebox start --!>
<div class="fb-like-box" data-href="http://www.facebook.com/depermana12" data-width="290" data-height="182" data-show-faces="true" data-stream="false" data-header="false"></div>
<!-- likebox end --!>
<a class='close' href='#'>×</a><a style=" font-size:10px; color:#3B78CD;float:right; margin-right:35px; font-size:10px;" href="http://depermana-share.blogspot.com">::Get This::</a>
</div>
</div>

4. login blogger
5. template >> edit html
6. cari kode <body>
7.copy paste script jsdk ini tepat diabawah <body>

<div id='fb-root'></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

NOTE: ganti tulisan berwarna merah dengan url facebook fanpage sobat

Tutorial Blog