- Home >
- Tips Blog , Trik Blogging , Widget >
- cara memasang kotak like facebook melayang pada blog
Posted by : Cyberr Pamekasan
Jumat, 14 Juni 2013
Cara Memasang pada Blog
1. Login Ke Blogger
2. Pilih menu Tata Letak >> Tambah Gadget >> HTML/Javascript
3. Copy paste kode Dalam Kotak di Bawah ini :
4. Klik simpan
NOTE :
Ganti tulisan yang berwarna merah dengan URL alamat facebook fanpage sobat
NOTE :
Ganti tulisan yang berwarna merah dengan URL alamat facebook fanpage sobat
<!-- floating FB like box DP12 -->
<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 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>
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Taretan-JCC/469037336507061" 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>
<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 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>
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Taretan-JCC/469037336507061" 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>