Translate This Blog

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Sabtu, 19 Mei 2012

Membuat FB Like Box Melayang Slide Close

Membuat FB Like Box Melayang Slide Close

Pagi ini saya akan mencoba sharing sebuah widget facebook like box yang melayang dengan tombol close dengan efek slide ketika di tekan. Saya mencoba menggabungkan kode-kode script yang saya dapat dari bloger-bloger lain selama belajar blogging yang saya tekuni selama ini dan hasilnya menurut saya lumayan untuk diterapkan di blog. Bagi para master, tolong kasih masukan tentang widget ini kalau ada kesalahan. Widget ini lumayan simpel karena tidak perlu mengobok-obok HTML template blog Anda.

Bagi yang ingin mencoba menggunakannya di blog, silahkan ikuti caranya di bawah ini.
1. Seperti biasa silahkan login ke blog Anda.
2. Dashboard >> Layout >> add a gadget >> pilih HTML/JavaScript,kemudian copy kode di bawah ini.
<div style="display:scroll;position:fixed;top:50px;left:400px;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://kompiajaib.googlecode.com/files/slidefbnew.js" type="text/javascript">
</script>
<style>
#kompiajaib_slidefb2012{
font-family: "Consolas", "Courier New", Courier, mono, serif;
border: 1px solid;
width: 355px;
margin: 10px 0px;
padding:5px 0px 0px 5px;
background-repeat: no-repeat;
position:relative;
color: #00529B;
background-color: #000000;
}
</style>
<div id="kompiajaib_slidefb2012">
<a class="close"  href="#close" style='position:absolute;right:0px;top:0px;margin-right:-1px;margin-top:-1px;'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3VO_TLyLGuycBrJWc0KEUKDwDclDaN6An-G5uSJ_K0kN4svw5BMipNv35bmHCMvx9x1WkMq6mxfJQq8ybHGgWeQr9r1ZwY8tROJRgOnyiwzCTG3mAAlMrLtiLMrrZ6xwWbEDjA89QltLM/s1600/popover-close-button.gif" /></a>
<div style='width:99%;padding:8px 0px;background-color:#737373;font-family:arial;text-align:center;'><div style='color:#FFF;font-size:13px;font-weight:bold;'>Like us and get updates</div></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Kompi-Ajaib/395526477133955&amp;width=350&amp;height=255&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=%23FFFFFF&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:255px;" allowtransparency="false"></iframe><div style="border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;">Powered by <a href="http://kompiajaib.blogspot.com/" target="_blank">blogger widget</a></div>
</div></div>

Warna background widgetnya hitam atau dark.
#000000 adalah background widget, silahkan sesuaikan dengan template Anda. Untuk mengetahui kode warna silahkan masuk  
http://www.facebook.com/pages/Kompi-Ajaib/395526477133955 silahkan ganti dengan URL facebook Anda.
Jika background widgetnya terang, silahkan ganti dark dengan light

Demikin sharing Membuat FB Like Box Melayang Slide Close kali ini mudah-mudahan bermanfaat.
Broken link laporkan di sini

0 komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...
Blogger Gadgets