DUNIA COMPUTER: Cara Membuat Like Box Facebook Melayang Di Blog

04 December 2014

Cara Membuat Like Box Facebook Melayang Di Blog

Anda mungkin sering sekali mendengar kata" like box " dan tentunya sudah tidak asing lagi dengan widget like box kan? like box yaitu widget yang menampilkan Fanspage facebook di blog. Biasanya Widget ini digunakan oleh para pemilik blog atau sejenisnya untuk menambah Like pada Fanspagenya.

Like box ini biasanya ada beberapa jenis, ada yang like box melayang dan yang tidak. Sebelum kita membahas lebih dalam mengenai cara membuat like box ada baiknya kita membuat terlebih dahulu fanspage di facebook atau sering dikatakan sebagai halaman facebook. Nah, kali ini like box yang akan kita bahas adalah like box melayang dimana like box ini juga disertai tombol " close ".

Cara Memasang Like Box Melayang :

1. Login ke blogger.com

2. Pilih menu "Tata Letak"

3. Klik "Tambahkan Gadget" Terserah yang mana aja boleh, soalnya widget ini float (melayang).

4. Pilih "HTML/Javascript".

5. Masukkan 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'>

<center><a class="murub">Buat teman - teman silahkan di like ya!</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Dunia-Computer/748226928560518?ref=hl&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>

<br/>
<div class="twitter">
 <iframe title="" style="width: 250px; height:
20px;" class="twitterx-follow-button"
src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=ID&link_color=&screen_name=wenny-siahaan&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div style="text-align: center;">
<a href="http://updatekomputere.blogspot.com/2013/10/cara-membuat-fanspage-melayang-di-blog.html" target="_blank">Get This Widget</a></div>
<a class='close' href='#'>×</a>
</div>

6. Ganti yang berwarna Merah dengan URL Fanspage Facebook kalian dan Biru dengan alamat url blog sobat.

7. Klik "Simpan"

Maka tampilan nya akan seperti ini..!