Cara Membuat Like Box Facebook Melayang di Blog

Assalamualaikum wr.wb.

Hallo sobat kali ini saya akan share bagaimana cara menambahkan like box yang melayang, menurut saya ini merupakan cara termudah dalam menambahkan widget yang satu ini, soalnya ada beberapa banyak artikel yang saya lihat sangat rumit sekali, maka langsung saja kita liat tutorialnya....

nih sobat contoh punya ane...

ya udah lah kita mulai aja... :


1. Klik Dasboard Blogger sobat > Tata Letak > Tambah Gadget..

2. Pilih HTML Javascript Lalu 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><a class="murub">Temukan Kami di Facebook</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Anak.Semarang.Poenya?fref=ts&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 -->
<br/>
<div class="twitter">
<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=Amri_ElNynosChe&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
</div>

3. Yang Berwarna Merah Ganti text itu sesuka agan
Yang Berwarna Hijau Ganti Dengan URL Fanspage Facebook agan
Yang Berwarna Biru Ganti Dengan nama twitter agan

4. Lalu Simpan Dan lihat Hasilnya

Nah begitu aja sih tutorial mengenai Cara Membuat Like Facebook Melayang di Blog ( Like Box ) , jika ada yang kesusahan berkomentarlah yang sopan, yaudah sekian ajalah klo ada kesalahan mohon maaf yaa....
Semoga bermanfaat..
good luck.., semoga berhasil sobat

Wassalamualaikum Wr.Wb.

0 Response to "Cara Membuat Like Box Facebook Melayang di Blog"

Post a Comment