Cara Buat Widget Melayang di Blog

Cara Buat Widget Melayang di Blog

Written By Belajar Internet on Kamis, 19 Juli 2012 | 20:43

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 warnabackground. 
* 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.