Widget Popup Fanspage versi Polos

Kali ini saya akan share Artikel tentang Widget, widget ini mungkin sering di jumpai para blogger saat berkunjung ke blog lain. Namun kali ini saya akan share Widget Popup Fanspage versi Polos yang mungkin masih jarang kalian temui. Kelebihannya widget ini tidak begitu berat dan  juga tidak disertai dengan timer

Langsung saja ke pembahasan

1. Login ke Blogger sobat
2. Klik panah kecil (Opsi Lainnya), kemuian pilih Tata Letak
3. Tambahkan Gadget, pilih HTML/Javascript
4. Masukkan Kode berikut

<!-- FB melayang tombol close --!>
<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;">Like Fanspage Kami,<blink> CoretaNewbiee!!</blink> </p>
<!-- Mulai --!>

<div class="fb-like-box" data-href="https://www.facebook.com/CoretaNewbiee" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >
</p></div>

- Keterangan:
      Tulisan berwarna Merah ganti dengan terserah sesuai keinginan sobat
      Tulisan berwarna Oranye ganti dengan link Fanspage anda
   

- Simpan & Selesai

Sekian Pembelajaran tentang Widget

Semoga bermanfaat, Terima Kasih