Selasa, 30 Oktober 2012
Hai sobat bloggers, udah puasa belum? Baiklah, postingan Belajar Internet kali ini akan membahas tentang Cara Buat Widget Melayang di Blog. Widget melayang? Seperti apa yah? Kayak superman? 
..Tentu
saja bukan, widget ini mungkin sudah pernah Anda lihat di beberapa blog
ataupun website, kadang widget melayang tersebut adalah widget like box
facebook, iklan atau promosi, dan mungkin juga widget follow twitter.
Sekarang, kalian sudah mengerti bukan? Widget semacam ini saya temukan
ketika saya berjelajah menggunakan search engine terbaru saya. Tanpa basa-basi dan terus ngawur ngga jelas, ayo kita lihat caranya lansung.1. Seperti biasa login ke akun blogger sobat
2. Masuk di bagian Tata Letak
3. Klik Tambah Gadget atau Add Gadget
4. Pilih HTML/JavaScript
5. Judul dikosongkan saja
6. Copy kode di bawah ini:
<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:2px solid #bb0000; background:#eeeeee; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb");
var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w,
0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb =
document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 :
1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top =
x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+",
"+xf+")", 10);} } </script> <div id="gb"> <div
class="gbtab" onclick="showHideGB()"> </div> <div
class="gbcontent"> <div style="text-align:right">
<a href="javascript:showHideGB()"> .:[Close][Klik 2x]:.
</a> </div> <center>Masukkan kode widget apa aja disini, iklan, like box atau follow twitter</center>
<script type="text/javascript"> var gb =
document.getElementById("gb"); gb.style.center =
(30-gb.offsetWidth).toString() + "px";
</script></div></div>
catatan:
* Untuk yang berwarna hijau, silahkan Anda ganti sesuai dengan ukuran, posisi atau warna background.
* Untuk yang berwarna merah, silahkan ganti kodengan kode widget yang Anda ingin buat melayang.
7. Klik Simpan
Nah, sekarang widget melayang sobat sudah selesai, selamat mencoba.
