Cara Membuat Facebook Like Box Melayang
Oke, kita Langsung pada Intinya
Step 1
Masuk ke akun blogger Anda www.blogger.com
Step 2
Masuk ke Dashboar dan pilih template lalu edit html
Step 3
Copy kode berikut dibagian bawah <head> (Tekan CTRL+F untuk mencari)
<style type="text/css">
#haakblogFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-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;
}
#haakblogFBpop a.haakblogclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-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:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript">
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#haakblogFBpop').animate({top:"150px"}, 1000);
// Widget by www.haakblog.com
$('a.haakblogclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id="haakblogFBpop">
<center>
<b>Nggak mau ketinggalan info? like dulu deh</b></center>
<center>
// PASTE KODE IFRAME ANDA DISINI
</center>
<!-- Widget End -->
<a class="haakblogclose" href="https://www.blogger.com/blogger.g?blogID=7575007314944342648#">×</a>
</div>
#haakblogFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-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;
}
#haakblogFBpop a.haakblogclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-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:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript">
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#haakblogFBpop').animate({top:"150px"}, 1000);
// Widget by www.haakblog.com
$('a.haakblogclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id="haakblogFBpop">
<center>
<b>Nggak mau ketinggalan info? like dulu deh</b></center>
<center>
// PASTE KODE IFRAME ANDA DISINI
</center>
<!-- Widget End -->
<a class="haakblogclose" href="https://www.blogger.com/blogger.g?blogID=7575007314944342648#">×</a>
</div>
Step 4
Masukkan kode iframe anda yang anda bisa dapatkan di https://developers.facebook.com/docs/plugins/like-box-for-pages/ Jangan lupa Masukkan alamat URL dari likebox Anda di kolom Facebook Page URL ya... Lalu klik Get Code. Step 6 Masukkan kode iframe untuk mengganti code diatas yang saya kasih tanda warna merah.
Nah, kalau kalimat pembukanya mau diganti tinggal ganti tanda warna hijaunya ya...
Step 6 Simpan perubahan templatenya dan coba deh check blog Anda.
Semoga membantu anda yang membutuhkan Cara Membuat Facebook Like Box Melayang atau Facebook Like Popup Box for blogger.
mantab.. terimakasih banyak buat script tutorialnya...
BalasHapus