Cara memasang kotak like facebook melayang pada blog

Posted by Unknown on June 07, 2013

Cara membuat like box facebook muncul dari bawah-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

Kumpulan trik SEO dan widget depermana12

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

Help

silakan tanyakan apa yang menjadi kendala sobat pada artikl kali ini pada kotak komentar dan dengan hati saya akan membalasnya, sedikit bantuan untuk blog ini tolongya klik like facebook fanpage dibawah ini dan jangan lupa untuk berlangganan artikel dari depermana12 dengan cara mensubscribe email sobat dibawah ini