Home » , » Membuat Widget Like Box Facebook Melayang di Blog

Membuat Widget Like Box Facebook Melayang di Blog

Like-Box-Facebook-Melayang

 Anda Ingin mendapatkan jumlah like (suka) halaman facebook blog Anda lebih banyak? Ada banyak cara, salah satunya memasang widget like box yang disediakan oleh facebook plugins dengan model melayang atau floating. Widget ini memiliki tombol close untuk menghilangkan atau menutup widget like box tersebut sehingga tidak akan menganggu pembaca setia blog Anda,

Tujuan memasang Widget like box facebook untuk mempromosikan halaman facebook blog kita. Jika pengunjun suka dengan blog kita, tentunya pembaca tidak akan ragu untuk mengklik like (suka). Tertarik untuk memasangnya ? Silahkan ikuti langkah-langkah berikut :

Cara Membuat Widget Like Box Facebook Melayang di Blog

1. Login ke blog Anda
2. Pilih Tata Letak kemudian Tambah Gadget
3. Klik HTML/JavaScript
4. Masukan kode berikut 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>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/umstrie23com?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>

5. Ganti tulisan warna merah dengan URL halaman Facebook kamu.
6. Simpan dan lihat hasilnya.

Semoga bermanfaat !!! 
Share this article :
Comments
0 Comments

0 comments:

Post a Comment

 
Support : Contact | Privacy Policy | Disclaimer
Copyright © 2014. Umstrie Duatiga.com - All Rights Reserved
Template Created by Mas Kolis Published by Umstrie23.com
Proudly powered by Blogger>