Cara memasang kotak like facebook melayang pada blog ~ Sitii's Blog

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 unik 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

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="https://www.facebook.com/siti.hwa?ref=tn_tnmn" 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

Sitii's Blog

Jumat, 16 Agustus 2013