Friday

Cara Membuat Tombol Like Box Facebook Melayang

Selamat datang di Blog taharonqi.blogspot.com kali ini saya akan berbagi kepada sobat-sobat blogger semua sebuah cara membuat tombol like box facebook dan twitter melayang  yang pastinya keren dan bisa dirubah border dan backgroundnya. untuk lebih jelasnya berikut adalah screenshotnya 


Gimana sobat?Apakah sobat tertarik untuk menaruhnya diblog sobat?
Jika tertarik ikuti langkah-langkahnya sebagai berikut :
  • Masuk ke Akun Blogger sobat
  • Pilih menu Tata Letak 
  • Klik Tambahkan Gadget
  • Pilih HTML/Javascript
kemudian masukkan kode berikut

<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:black;
font:normal Dosis, Georgia, Serif;
color:darkwhite;
border:5px solid darkgreen;
-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">Jangan Lupa di Like Ya Sobat</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/taharonqiblog/550080118406501&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=tahar_onqi&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
</div>
 keterangan :
Tulisan warna hijau    : Ganti sesuai keinginan sobat
Tulisan warna biru     : Ganti sesuai keinginan sobat
Tulisan warna kuning : Ganti dengan URL halaman sobat
Tulisan warna merah : Ganti dengan ID twitter sobat

  • Klik simpan dan lihat hasilnya.
Mungkin itu saja yang dapat saya bagi buat sobat-sobat blogger semua pada kesempatan kali ini dan mungkin ada yang masih kurang jelas, sobat bisa berkomentar, terima kasih

13 comments:

  1. ini yang aku cari sob, thanks

    ReplyDelete
  2. makasih atas infonya, kapan-kapan aku juga mau coba..ahh

    ReplyDelete
  3. wah keren mas dengan menggunakan script di atas widget fanspage jadi melayang ya mas, thanks ya udah sharing tutorialnya :)

    ReplyDelete
  4. bagus bisa melayang, tapi saya belum punya fans page mas hihi

    ReplyDelete
  5. Gan cara bkin kotak script kayak agan itu gmn caranya??

    ReplyDelete