[Blogspot] Cara Membuat Facebook Pop Up di Blog

[Blogspot] Cara Membuat Facebook Pop Up di Blog

Ini adalah satu lagi jQuery Pop Up Facebook keren seperti kotak dengan timer yang datang dengan 4 skin yang berbeda dan sangat mudah untuk di customize. Facebook Pop Up ini dilengkapi dengan fitur gambar dan timer, jadi tidak ada salahnya sobat blogger mencobanya.

Langkah :

Buka akun Blogger Anda
Masuk ke menu edit HTML, jangan lupa centang Expand Template Widget
Cari kode dibawah ini :

</body>

4. Diatasnya pastekan kode dibawah ini :

<style>#fblikepop {
background-color: #fff;
display: none;
position: fixed;
top: 200px;
_position: absolute;
/* hack for IE 6*/
width: 450px;
border: 10px solid #6F6F6F;
z-index: 200;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
margin: 0pt;
padding: 0pt;
color: #333333;
text-align: left;
font-family: arial,sans-serif;
font-size: 13px;
}
#fblikepop body {
background: #fff none repeat scroll 0%;
line-height: 1;
margin: 0pt;
height: 100%;
}
.fbflush {
cursor: pointer;
font-size: 11px !important;
color: #FFF !important;
text-decoration: none !important;
border: 0 !important;
}
#fblikebg {
display: none;
position: fixed;
_position: absolute;
/* hack for IE 6*/
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 100;
}
#fblikepop #closeable {
float: right;
margin: 7px 15px 0 0;
}
#fblikepop h1 {
background: #6D84B4 none repeat scroll 0 0;
border-top: 1px solid #3B5998;
border-left: 1px solid #3B5998;
border-right: 1px solid #3B5998;
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: normal !important;
padding: 5px !important;
margin: 0 !important;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}
#fblikepop #actionHolder {
height: 30px;
overflow: hidden;
}
#fblikepop #buttonArea {
background: #F2F2F2;
border-top: 1px solid #CCCCCC;
padding: 10px;
min-height: 50px;
}
#fblikepop #buttonArea a {
color: #999999 !important;
text-decoration: none !important;
border: 0 !important;
font-size: 10px !important;
}
#fblikepop #buttonArea a:hover {
color: #333 !important;
text-decoration: none !important;
border: 0 !important;
}
#fblikepop #popupMessage {
font-size: 12px !important;
font-weight: normal !important;
line-height: 22px;
padding: 8px;
background: #fff !important;
}
#fblikepop #counter-display {
float: right;
font-size: 11px !important;
font-weight: normal !important;
margin: 5px 0 0 0;
text-align: right;
line-height: 16px;
}</style>
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
//<![CDATA[
kakinetworkdotcom01username="SpiceUpBlogging",
kakinetworkdotcom01title="Join us at Facebook!",
kakinetworkdotcom01skin="02",
kakinetworkdotcom01time="15",
kakinetworkdotcom01wait="0",
kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="http://code.helperblogger.com/likebox-with-timer.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>

Keterangan :

Sekarang ganti SpiceUpBlogging dengan username facebook Anda
Anda dapat mengedit judul popup likebox, untuk mengubah itu hanya mengedit kata "Join Us At Facebook!"
Pop up ini akan hilang setelah waktu yang telah Anda tentukan, saya telah mengatur waktu untuk 15 detik, Anda dapat mengubahnya dengan hanya mengubah nilai dalam kakinetworkdotcom01time="15",
Widget muncul segera setelah eneters visiter. Jika Anda ingin muncul setelah satu menit atau lebih kemudian mengedit menunggu: kakinetworkdotcom01wait="0",
Untuk mengubah citra kulit yaitu dalam pop up maka cukup mengedit kakinetworkdotcom01skin="02", dan melakukan perubahan 02 dengan 01, 02, 03 atau 04. Berikut adalah beberapa contoh dari skin yang disediakan :

Skin 01