Tuesday, November 17, 2009

Gadget Melayang



Contohnya seperti gambar di bawah ini.































Langkah-langkahnya sbb :

1. Login blogger > tata letak > elemen laman > gadget > html/javascripts..

2. Copas kode dibawah ini ke dalam gadget tadi.
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FAFD02;
background:#FAFD03;
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.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="190" frameborder="0" src="http://www6.shoutmix.com/?ecaknyo" height="700" title="ecaknyo">
<a href="http://www6.shoutmix.com/?ecaknyo">View shoutbox</a>
<!-- End ShoutMix --></iframe>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></center></div></center></div></div></div>
Di atas ini adalah contoh yang diterapkan pada gadget shoutmix.



Ket.
Merah, ganti dengan kode gadget yang akan dibuat melayang
Biru, untuk menganti dengan url gambar tabnya.
Ungu, mengatur tinggi & lebar sesuai ukuran gambar tabnya.

Tosca
.gbtab, ini kode untuk pengaturan tampilan gambar tab

Orange
gbcontent : ini kode untuk mengatur tampilan kontennya.
float:left; : mengatur posisi gadgetnya melayang di kiri / kanan / atas / bawah
border:2px solid : memberi warna pada border konten.
background : memberi warna pada isi konten.

4. Simpanlah gadget dan lihat hasilnya.



Selamat Mencoba.


51 comments:

  1. thanks sharing ilmunya, sangat bermanfaat sob

    ReplyDelete
  2. Widget melayang kayak gini memang keren ya Andi... Trims yah, kalo saya mau pake, sudah tau caranya!
    Hebat amat sih, satu hari sampe bikin 3 posting, kalau saya sih, belum sanggup...hehehe

    ReplyDelete
  3. Mantab ilmunya....
    Hebat posting sehari tiga kali, kayak minum obat.
    Tambah posting satu lagi, dapat bonus payung... hehehehee....
    Keren.... KEEP SPIRIT!!!

    ReplyDelete
  4. Aku masih belum mudeng nih....

    ReplyDelete
  5. @ Kang Deni Ahmad : sama2..Thx jg Kang Deni..krn telah komeng :-)

    @ Lina : Silahkan nanti di coba2 lina.. hehe..hebat ngak jg lin.. lagi smangat blogging aja kemaren.. ;-)

    @ Auldey : hihihi.. bisa aja auldey.. :D ..yaa KEEP SPIRIT!! ;-)

    @ Yoga : Waa.. Masi binggung yaa..binggungnya dimana yoga :)

    ReplyDelete
  6. siap, disimpen dulu nich, thx ilmunya mantep

    ReplyDelete
  7. salam sahabat
    wah bagus mas Andi,izin saya praktekkan ya thnxs oh iya ada award sederhana mohon kesediaanya di ambil ya mas thnxs n good luck

    ReplyDelete
  8. saya juga mau buat nih buat iklan kayak detik :)

    ReplyDelete
  9. @ Dhana : silahkan di praktekan dhana :-)

    @ Mas DoyoK : Silahkan Mas.. :-D hehe

    ReplyDelete
  10. thx ilmunya..
    ooh jadi itu namnya widget melayang..
    saya bilang mah ngumpet kayak arsip soalnya.. :)

    ReplyDelete
  11. Wah trik baru nih.. mantap sobat...

    ReplyDelete
  12. @ Nita : agagag :D ..bener jg yaa nita..widget ngumpet yaa... bisa aj

    @ Akhatam : ini trik lama sob.. sdh byk jg blogger lain yg posting.. berhubung ada yg nanya sm gw.. makanya gw posting dg gayaku.. :D

    @ Meyda : sama2 meyda..thx jg krn telah berkunjung & komeng ;-)

    ReplyDelete
  13. melayang jauh terbang tinggi, menggapai mimpi....lho koq malah nyanyi...hehehe.., thanks postingannya sob, jadi nambah ilmu neh

    ReplyDelete
  14. @ Mas Moer : Hahaha :D.. lagunya siapa tuh yaa.. GiGi ya.. :D ..Thx jg krn telah komeng.. :-)

    ReplyDelete
  15. makasih infonya, kepikiran sih pengin bikin spt itu, tp menunggu apa sih yang mau saya jadikan widget melayang, soalnya klo shoutmix biarin aja deh tampil spt itu, biar pada gak bingung carinya. Thanks sob

    ReplyDelete
  16. makasih...infonya..tetap semangat..

    ReplyDelete
  17. dateng lagi kali ini lewat sekalian baca artikel lain thnxs ya good luck

    ReplyDelete
  18. @ Aryo : oke sob.. mana yang lebih bagus menurut kita..ya itu yg terbaik..

    @ Kavke-santi : hehe.. okay :D

    @ Wilyo Alsyah : Pasti..Semangat Blogging sob.. ;-)

    @ Dhana : silahkan baca-baca dhana :-)

    ReplyDelete
  19. Salam Kenal
    Mantap, Terima kasih uda siapkan Scriptnya dan Saya sudah Ambil Scriptnya untuk dipraktekan di WebLog Saya, Cuma belum tau mau pake untuk apa. "New"
    Terima Kasih tutorialnya

    ReplyDelete
  20. Thanks sob..sangat bermanfaat tipsnya...
    klo yang untuk iklan melayang tau gak????...

    ReplyDelete
  21. Sob..klo iklan melayang tau gak??? mohon pencerahannya sob...

    ReplyDelete
  22. wa mau nanya! lok timer di sudut,gmn??tp maksh infonya..

    ReplyDelete
  23. wah info nya sangat membantu banget . . . thx gan

    ReplyDelete
  24. @ Post : berbagi ilmu gan.. :D

    @ serbaposting : salam kenal gan.. disimpan aj dulu gan tutorial ini.. :-)

    @ Astaga.com Lifestyle on the net : oke..gkppa ..silahkan gan..

    @ Fakta Unik : udah saya jawab pertanyaan kamu > http://ecaknyo.blogspot.com/2010/05/cara-membuat-iklan-melayang-dengan.html

    @ zeetta : lok timer yg mana gan ?..

    @ wahjoe : sama2 gan.. :-)

    @ YUI-INDO bandung : baguslah kalo kamu berhasil.. ;-)

    ReplyDelete
  25. http://robertbongso.blogspot.com
    Top Blog... IS The Blog....

    ReplyDelete
  26. mantap nich sob. langsung menuju ke TKP aja .....

    ReplyDelete
  27. DRAGON COM > oke ntar wa mampir gan .. waaaait for me ;)

    Blogger Newbie > silahkan dicoba gan.. :D

    ReplyDelete
  28. Artikel2 nya bagus2 mas, buat newbi sepertiku sangan bermanfaat skali.:X

    ReplyDelete
  29. http://wisatasibolga.co.cc

    mantabbbbbbbbbbb..... bner
    ada yang lain yar lebih paham lagi

    ReplyDelete
  30. hadi > Siiip.. sy senang sekali kalo emg bermanfaat buat sahabat blogger lainnya.. ;)

    agus > :D ...ada tutor lainnya liat aj di daftar isi tutorial blogging sob.. :)

    ReplyDelete
  31. sip...!!!! trimaksih yah atas ilmunya!!!!

    ReplyDelete
  32. Tlong Follow aq donk sob, krn aq bru punya blog di sni http://liberty-aries.blogspot.com/
    aq udah follow di blog km... @

    ReplyDelete
  33. gan saya udah follow yg naman ya ™_DIMAS_RADITYATAMA_™
    gan kok saya ga bisa si malah kaya biasa

    ReplyDelete
  34. udah bisa ni makasih ya ok !! ;) ;) ;) ;) ;)

    ReplyDelete
  35. wah banyak nih tutorialnya
    tukeran link donk, atau share link yuk
    punya aku www.cahayanusamadani.com
    minta dilike ya

    ReplyDelete
  36. makasih infonya

    ReplyDelete
  37. thanks for solution
    blogwalking visit myblog
    http://review-myblogsites.blogspot.com

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.