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.