Cara Memasang Widget Likebox Fanspage Facebook Melayang di Blog

Saya akan bahas bagaimana cara memasang widget likebox fanspage faceb melayang di blog, Langsung ke TKP

Ini juga berguna nantinya jika anda ingin mempromosikan artikel blog anda di halaman Fanspage Facebook anda. karena ketika anda mempostingkan halaman blog atau website anda maka akan muncul di beranda Facebook orang yang sudah me-like Fanspage Facebook anda. Coba anda bayangkan ketika like di "Fanspage Facebook" anda telah berjumlah ribuan atau bahkan puluhan ribu! ini memungkinakan artikel anda akan dilihat oleh banyak orang dan tentu saja mendatangkan pengunjung yang banyak pulah diblog anda.Widget Fanspage Facebook melayang berikut ini dapat dikatakan simple karena tidak besar-besar amat sehingga dengan tombol close yang kecil, sehingga jika nantinya pengunjung blog anda malas mngklik close maka dia tidak akan terganggu dengan widget ini.

Ok apakah anda tertarik ingin Membuat Widget Like Box Facebook Melayang di Blog anda? silahkan Ikuti langkah-langkah dibawah ini.


Cara Membuat Widget Fanspage Facebook Melayang di Blog



1. Syarat utama : Memiliki Sebuah Halaman FacebookSetelah anda memiliki sebuah halaman facebook, ikuti langkah selanjutnya.
2. Buka Akun Blog yang anda kelola.
3. Pada Dasbor Blog anda, masuklah ke Elemen Tata Letak, pilih Add Widget / Tabaah Gadget
4. Lalu pilih HTML/Javascript
5. Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat. 
<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/pages/Soft4Fox/339280342948904?ref=hl?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 -->
<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=soft4fox&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div style="text-align: center;">
<a href="http://fujianto21-chikafe.blogspot.com/2013/10/cara-membuat-fanspage-melayang-di-blog.html" target="_blank">Get This Widget</a></div>
<a class='close' href='#'>&times;</a>
</div>

6. Silahkan ganti kode ini-(Editnya hati-hati ya, jangan sampai ada kode yang terhapus)

  • Yang Berwarna Hijau : Tulisan atau pesan
  • Yang Berwarna Merah : URL Fanspage-nya
  • Yang Berwarna Biru : Username Twitter-nya (misal @soft4fox, maka jadi soft4fox)

7. Lihat hasilnya seperti gambar dibawah ini :




8. Jika berhasil maka selamat anda telah berhasil memasang Likebox fanspage di facebook versi melayang.

0 Response to "Cara Memasang Widget Likebox Fanspage Facebook Melayang di Blog"