Biasanya penempatan fans page FB berada pada widget yang statis, apakah itu di side bar ataupun pada footer sehingga tidak setiap waktu terlihat oleh pengunjung blog kita apabila halaman yang sedang dibaca mereka geser keatas atau kebawah.
Kali ini saya ingin berbagi cara membuat fanspage melayang di blog, artinya fanspage tersebut akan selalu tampil pada halaman blog sobat jika halaman blog tersebut di refresh Sehingga memungkinkan pengunjung untuk dapat klik like pada halaman sobat blogger.
Langsung aja tidak perlu panjang lebar, karena katanya kalau terlalu "panjang" kasihan cewek nya, dan kalau terlalu "lebar" kasihan cowok nya. He..he..he..
Langsung aja tidak perlu panjang lebar, karena katanya kalau terlalu "panjang" kasihan cewek nya, dan kalau terlalu "lebar" kasihan cowok nya. He..he..he..
Berikut panduannya:
1. Masuk ke "Tata Letak" pada blog Anda kemudian "Tambahkan Gadget"
1. Masuk ke "Tata Letak" pada blog Anda kemudian "Tambahkan Gadget"
2. Pilih "HTML/JavaScript"
3. Copy - paste kode dibawah ini:
<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
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;
}
#box-message a.close {
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:#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:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Jika bermanfaat, di LIKE ya</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=url page fb sobat; width=292& height=258& colorscheme=light& show_faces=true& border_color& stream=false& header=false& appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<a class='close' href='#'>×</a>
</div>
· Ganti tulisan yg berwarna biru Dengan kata-kata sesuka hati sobat.
· Ganti tulisan yg berwana merah dengan url page fb sobat
url fanspage
EmoticonEmoticon