Tuesday, November 17, 2009

CARA MEMBUAT WIDGET MELAYANG DI BLOG..

Bookmark and Share

Waa.. semangat sekali saya posting artikel hari ini.. sudah 3 artikel saya postingkan...
1. Cara Membuat Daftar isi Blog Manual...
2. Cara Setting Waktu di Widget SHOUTMIX agar sesuai dengan waktu negara kita....
..dan postingan ini yang ke-3...
..Mantab Semangat Bloggingku sob.. MySpace..tapi pusing juga sih..MySpace.. :-D ..hehehe..
Postingan yang ini karena sahabat Delta-Prayoga yang bertanya "eh buat menu di samping begitu gmn yah...? " ..Maksudnya Menu Widget Mp3 DownLoadku yang Melayang di Blogku itu sob itu.. :-) ...

Contoh widget melayang yang ada di blog ini
MySpace..Okay.. Langsung kita bahas ya.. simak langkah-langkahnya berikut ini :
1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts 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>
Pada Contoh di atas adalah Widget Melayang Shoutmix...

Lihat Contoh Jadi kLik urL ini => ecak2nyo

Keterangan :

Merah = Gantilah dengan kode Scripts Widget yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..
Biru = Gantilah dengan URL Gambar Tab kamu (atau pakai saja url gambar tab diatas tdi) .. Gambarnya bisa kamu buat dengan Program seperti Photoshop.. lalu kamu Upload/simpan gambar tsb di Photobucket ..baru kamu bisa mendapat kode url Direct Link gambar tdi..
Pink = Aturlah Tinggi & lebarnya sesuai ukuran Gambar Tab kamu..

.gbtab{ = Ini kode scripts untuk pengaturan tampilan gambar tab

Orange
gbcontent = Ini kode scripts untuk mengatur tampilan kontennya
float:left; = Ini utk mengatur posisi widgetnya melayang di kiri / kanan / atas / bawah
border:2px solid #FAFD02; = Memberi warna pada border konten...aturlah/ubahlah warnanya jika mau.. misalnya FAFFFF (sebaiknya gunakan pencari kode warna Photoshop)
background:#FAFD03; = Memberi warna pada isi konten.. disini saya menggunakan warna kuning

4. Simpanlah Widget Melayang ini... Selesai.. namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.. Untuk melihat hasilnya silahkan Refresh blog kamu.. Mudahkan.. ;-)

MySpace
.... 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.

Emoticon : Untuk menyisipkan emoticon dalam komentar, silahkan klik pada emoticons icon yang tersedia dibawah ini untuk melihat kodenya lalu tinggal di copy dan di paste [ sisipkan ] kodenya ke dalam komentar.