Cara Memasang Widget Like Facebook Melayang di Blog Kita

Hello sobat blogger kali ini saya akan share tentang "Cara Memasang Widget Like Facebook Melayang di Blog Kita". Sebelum memasang widget ini kalian harus punya fanspage facebook sendiri ya. Jadi saat Memasang Widget Like Facebook Melayang di Blog Kita, pengunjung visitor blog dapat mengklik sebuah box apakah visitor tersebut mau me-Like FP kita atau tidak. Berikut adalah contoh widgetnya.

Penasaran ingin tahu bagaimana Cara Memasang Widget Like Facebook Melayang di Blog Kita? Ikuti langkah berikut ini:.

Cara Memasang Widget Like Facebook Melayang di Blog Kita

1. Yang paling penting adalah kalian memiliki fanspage di Facebook. 
2. Log In ke blog kalian
3. Pada Dashboard pilih Tata Letak, lau klik "tambahkan gadget"
4. Pilih menu HTML/Jawascript
5. Kemudian copy scrip kode di bawah ini dan paste ke Widget/Gadget Baru yang tadi dibuat

<!-- 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/" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>

<!-- Selesai --!><a class='close' href='#'>&times;</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://kumpulan-adsen.blogspot.com/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://bos-tutorial.blogspot.com/2013/07/inilah-memasang-widget-like-box.html">Get This Widget</a></p>
</div>

6. Simpat Gadget Baru Kalian
7. Cek hasilnya

Perlu diperhatikan :

Tulisan berwarna Biru adalah contoh Kode Script dari Halaman Facebook .Kalian bisa ganti dengan link Fanspage facebook kalian

Demikian tutorial mengenai blogging yang bisa saya share untuk kalian
Semoga Bermanfaat:)

Related Post