Cara Pasang Widget Facebook Like Box Melayang di Blog

Sangat menarik apabila blog/web yang kita kelola di pasang sebuah widget. Katakanlah seperti widget Facebook ini. Dengan adanya widget ini, selain bisa menjaring pemirsa setia blog kita, juga bisa mempercantik tampilan blog. Pernah dengar widget Facebook Like Box? Itu lho widget yang berbentuk kotak dan ada tombol like/suka serta foto para liker. Kita kali ini akan membahas topik tentang hal ini.

Sebelum anda memasang widget Facebook Like Box ini di blog kesayangan anda, terlebih dahulu anda harus punya Halaman Suka atau yang biasa disebut sebagai Fans Page Facebook. Apabila belum punya, silahkan buat terlebih dahulu atau baca selengkapnya tentang Cara Membuat Fans Page / Halaman Suka Facebook.

Berikut adalah contoh Widget Facebook Like Box di Blog yang saya buat . Jika anda suka silahkan anda simak baik-baik ya langkah-langkah nya untuk memasangkan nya di blog anda

Untuk membuat Widget Facebook Like Box seperti di atas silahkan copas script di bawah 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">Di Like Yah :)</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/FAJAR-CYBER/323536887849420&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=FajarHackCyber&amp;show_count=&amp; show_screen_name=FAJAR CYBER&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
</div>

Keterangan :

text yg berwarna hijau itu adalah kata-kata yg akan di tampilkan di widget, silahkan ganti dengan kata-kata apa saja sesuai keinginan anda

text yg berwarna merah itu adalah url fanpage facebook, silahkan ganti dengan url fanpage facebook anda

text yg berwarna biru itu adalah username twitter, silahkan danti dengan username twitter anda

Cara Memasang Widget Facebook Like Box di Blogger/Blogspot

(1) Silahkan log in di www.blogger.com
(2) Dashboard > pilih tata letak/layout > klik tambahkan Widget/Gadget
(3) Pilih widget HTML/JavaScript > paste suluruh script yang anda copas tadi
(4) Klik save dan lihat hasilnya

Cara Memasang Widget Facebook Like Box di WordPress

(1) Silahkan log in di www.wordpress.com
(2) Pilih menu Appearance > pilih sub Menu Widget
(3) Pilih Widget Text > klik Add Widget
(4) Silahkan paste seluruh script yang anda copas tadi > klik Save > lihat hasilnya

Bagaimana? Caranya sangat mudah kan? Kini giliran anda yang mencobanya. Good luck 

Demikian informasi yang bisa saya share untuk anda tentang Cara Pasang Widget Facebook Like Box di Blog. Mudah-mudahan bisa bermanfaat untuk anda sekalian. Jangan lewatkan posting menarik lainnya di Blog Fajar Cyber tentang Cara Membuat Akun Twitter Hanya Dalam 5 Menit .

Terimakasih sudah berkunjung di blog saya.

Sumber Dari: http://www.fajarcyber.com/2015/01/cara-pasang-widget-facebook-like-box.html#ixzz3n377ftEW

loading...