Cara Membuat Fanspage Facebook Melayang di Blog ( Like Box )

Mungkin teman-teman sudah sering liat post kaya gini.. :D
tapi sya mau shareCara Membuat Fanspage Facebook Melayang di Blog ( Like Box ) yang berbeda dari yang lain.. tapi intinya sama sih.. :v


jangan basa basi lagi..
ikutin langkah-langkah ini 



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

2. Pilih HTML Javascript Lalu Masukan Kode Berikut Ini.. :

<style type='text/css'>
/* Message Box http://kolbyart.blogspot.com*/
#box-message {
position:fixed !important;
position:absolute;
top:-100%;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#ff9000;
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:#ff9000;
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>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTHybzq_nGckYTuY5JEEWWORKLHkY5E5AJHr4uLDHYzOenTGBBV6nl5CN-QGczVuOn6V4O1i2mCZeT3s4Sh90Z2qUg4uAmKnGsVQDZW19WxflOB7WmX5mgQCB8Rxb2eb9SyIq8PV-NwfQ/s300/blogsKolbyARTbanner.png">
<a class="murub">Like and Follow</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/kolbyartblog&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:200px;" 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=kozima_kolby&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 Berwarn           itu code warna ganti Sesuka kamu
Yang Berwarna           Ganti Dengan URL gambar yang kamu mau
Yang Berwarna           Ganti sesuka kamu
Yang Berwarna           Ganti dengan URL fanspage facebook kamu  
Yang Berwarna           Ganti dengan username twitter kamu

4. Lalu Simpan Dan lihat Hasilnya..
Semoga bermanfaat. terima kasih sudah berkunjung dan jangan lupa likenya teman.. ^_^
  

Komentar