Sore 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.
DEMO
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/4131855615/slidefbnew.js" type="text/javascript">
</script>
<style>
#kang-faster_slidefb2013{
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="kang-faster_slidefb2013">
<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/AVvXsEiSbtV8LaKMy9O3vSkhVslp8lrblyfxTSkwpqu24QI60oIBw26IHebu9usvi2T3szruv4H05Ya1yMX7eBoR5S08e9Ad1eQyAtfTzErOQCuzYE_iekIahRM-xz7UGR5UVeeFyt-T2jiYtmtD/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 This Yo0o</div></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Kang-Faster/191934430930518&width=350&height=255&colorscheme=light&show_faces=true&border_color=%23FFFFFF&stream=false&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://kang-faster.blogspot.com/2013/03/membuat-like-box-fb-melayang-di-blog.html" target="_blank">blogger widget</a></div>
</div></div>
SAYA SARANKAN ANDA HANYA MENGGANTI TEXT BERWARNA MERAH SAJA DARI SCRIPT DIATAS OK!!
Bagi yang ingin mencoba menggunakannya di blog, silahkan ikuti caranya di bawah ini.
- Seperti biasa silahkan login ke blog Anda.
- Dashboard >> Layout >> add a gadget >> pilih HTML/JavaScript, kemudian copy dan paste kode di bawah ini.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/4131855615/slidefbnew.js" type="text/javascript">
</script>
<style>
#kang-faster_slidefb2013{
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="kang-faster_slidefb2013">
<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/AVvXsEiSbtV8LaKMy9O3vSkhVslp8lrblyfxTSkwpqu24QI60oIBw26IHebu9usvi2T3szruv4H05Ya1yMX7eBoR5S08e9Ad1eQyAtfTzErOQCuzYE_iekIahRM-xz7UGR5UVeeFyt-T2jiYtmtD/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 This Yo0o</div></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Kang-Faster/191934430930518&width=350&height=255&colorscheme=light&show_faces=true&border_color=%23FFFFFF&stream=false&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://kang-faster.blogspot.com/2013/03/membuat-like-box-fb-melayang-di-blog.html" 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 DI SINI
http://www.facebook.com/pages/Kang-Faster/191934430930518
silahkan ganti dengan URL facebook Anda.
Jika background widgetnya terang, silahkan ganti dark dengan light.
Bila URL page fb anda seperti ini :
http://www.facebook.com/pages/Kang-Faster/191934430930518?ref=hl
cukup gunakan hingga:
http://www.facebook.com/pages/Kang-Faster/191934430930518
SAYA SARANKAN ANDA HANYA MENGGANTI TEXT BERWARNA MERAH SAJA DARI SCRIPT DIATAS OK!!
Demikin sharing Membuat FB Like Box Melayang Slide Close kali ini mudah-mudahan bermanfaat.
0 comments:
Post a Comment