Home » , » Cara Buat Widget Melayang di Blog

Cara Buat Widget Melayang di Blog

Written By Justang Zealotous on Kamis, 19 Juli 2012 | 20.43

Cara Buat Widget Melayang di BlogHai 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? http://matcuoi.com..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.
Share this article :
Comments
10 Comments

10 komentar:

v-sualisasi mengatakan... [Reply]

kok saya gagal yah???????????

Berbagi ilmu mengatakan... [Reply]

Trima kasih gan,,,
sangat membantu saya nee.....
kunjung balik gan ke blog saya yang sederhana....

trimakasih.......

Mang uem mengatakan... [Reply]

Thanks sudah berbagi ilmunya, sukses selalu...

Bang Dadan mengatakan... [Reply]
Komentar ini telah dihapus oleh pengarang.
Cipto Junaedy mengatakan... [Reply]

mantap infonya

Antonius Alfari Aritonang mengatakan... [Reply]

Infonya bermanfaat.... thx ya sob :D

Jangan lupa visit dan follow....

http://anton.cyber4rk.com/

Dijamin difollback :D

topSpot | Find your top spot here mengatakan... [Reply]

Nice tutorial sob! Kapan-kapan bakal saya cobain nih di blog saya.

SALAM KENAL & SALAM BLOGGER :)

sukague.com mengatakan... [Reply]

blogwalking gan :))

Didi Maryadi mengatakan... [Reply]

Thanks atas infonya gan ...
sukses selalu yahh :) :)

mampir ke blogKU dan jngn lupa follow yah http://projectfamily42.blogspot.com

Berita Banten mengatakan... [Reply]

Sip gan triknya mantab :D

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!
Pasang Yahoo Emoticon Anda

Poskan Komentar

Jika ada yang kurang paham mengenai artikel ini, silahkan kirim komentar dan harus relevan dengan isi artikel di atas.INGAT jangan memberikan komentar dengan bumbu SPAM,P*RNO,PROMO,LINK !!! Terima Kasih dan jangan lupa follow blog ini nanti saya akan follback promise

 
Back To Top : Klik untuk Kembali ke Halaman Atas ↑↑↑
Copyright © 2011. Belajar Internet - All Rights Reserved
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Free Coupons