Posted by Aak
Aak-share.com Updated at: 9:09:00 AM

Cara Memasang Like Box Facebook Melayang di Blog

No comments:
Sebelum masuk kedalam ketopik Cara Memasang Widget Like Box Facebook Melayang di Blog, untuk memasang widget Like Box Facebook anda harus memiliki html Funs Facebook. Jika anda belum memiliki html Funs Facebook dan belum tahu cara membuatnya anda bisa membacanya disini

Funs facbook atau like box sering digunakan para Blogger untuk menaikan populeritas sebuah blog, agar juga para penggemarnya selalu dapat mengikuti kretifitas artikel-artikel terbarunya. Widget ini dilengkapi dengan tombol close dipojok kanan atas, sehingga pengunjung bisa dengan mudah menutup Kotak Widget, walau pun agak sedikit mengganggu dengan pengunjung menyukai halaman anda tidak akan dijadikan masalah dengan hadirnya widget ini dan pengunjungpun bisa menutupnya tanpa susah payah.


Jika anda sudah membuat halaman fans facebook dan sudah mempunyai htmlnya sekarang kita menuju dalam penerapannya di Blog, karena syarat utama memasang widget like facebook adalah dengan memiliki html fans facebook.

 Cara Memasang Widget Like Box Facebook Melayang di Blog

1. Anda login Keakun Blogger
2. klik Layout/Tata Letak
3. Selanjutnya Klik Add Gadget/Tambahkan Gadget
4. Lalu pilih HTML/Javascript
5. Selanjutnya copy script berikut ini dan masukkan kedalamnya :

<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-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;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2Faak-shareblogspotcom%2F727072134018053%3Fsk%3Dtimeline&amp;width&amp;height=220&amp;colorscheme=light&amp;
show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=591662174265135" scrolling="no" frameborder="0" style="border:0px solid ; overflow:hidden; height:220px;
}" allowtransparency="true"></iframe>

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; 
color:#3B78CD; text-decoration:none;" href="http://aak-share.blogspot.com/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; 
text-decoration:none;" href="http://aak-share.blogspot.com/2014/09/cara-memasang-widget-like-box-facebook.html">Get This Widget</a></p>
</div>

  
Keterangan :
Kode script warna biru silahkan aganti dengan html fans facebook anda.
Kode warna merah  untuk mengganti background, kode scrpt widget diatas berwarna putih, jika anda menyukai warna gelap anda bisa menggantinya CSS nya.

6. Simpan Gadget dan Lihat hasilnya

Demikian Cara Memasang Widget Like Box Facebook Melayang di Blog, mohon maaf jika ada kekurangan dan semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments