Contohnya seperti gambar di bawah ini.
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>
#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.
thanks sharing ilmunya, sangat bermanfaat sob
ReplyDeleteWidget melayang kayak gini memang keren ya Andi... Trims yah, kalo saya mau pake, sudah tau caranya!
ReplyDeleteHebat amat sih, satu hari sampe bikin 3 posting, kalau saya sih, belum sanggup...hehehe
Mantab ilmunya....
ReplyDeleteHebat posting sehari tiga kali, kayak minum obat.
Tambah posting satu lagi, dapat bonus payung... hehehehee....
Keren.... KEEP SPIRIT!!!
Aku masih belum mudeng nih....
ReplyDelete@ Kang Deni Ahmad : sama2..Thx jg Kang Deni..krn telah komeng :-)
ReplyDelete@ 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 :)
siap, disimpen dulu nich, thx ilmunya mantep
ReplyDeletesalam sahabat
ReplyDeletewah bagus mas Andi,izin saya praktekkan ya thnxs oh iya ada award sederhana mohon kesediaanya di ambil ya mas thnxs n good luck
saya juga mau buat nih buat iklan kayak detik :)
ReplyDelete@ Dhana : silahkan di praktekan dhana :-)
ReplyDelete@ Mas DoyoK : Silahkan Mas.. :-D hehe
thx ilmunya..
ReplyDeleteooh jadi itu namnya widget melayang..
saya bilang mah ngumpet kayak arsip soalnya.. :)
Wah trik baru nih.. mantap sobat...
ReplyDeletemakasih mas ilmunya,,,
ReplyDelete@ Nita : agagag :D ..bener jg yaa nita..widget ngumpet yaa... bisa aj
ReplyDelete@ 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 ;-)
melayang jauh terbang tinggi, menggapai mimpi....lho koq malah nyanyi...hehehe.., thanks postingannya sob, jadi nambah ilmu neh
ReplyDelete@ Mas Moer : Hahaha :D.. lagunya siapa tuh yaa.. GiGi ya.. :D ..Thx jg krn telah komeng.. :-)
ReplyDeletemakasih 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
ReplyDeletenek java scrip saya menghindari dulu dah...
ReplyDeletemakasih...infonya..tetap semangat..
ReplyDeletedateng lagi kali ini lewat sekalian baca artikel lain thnxs ya good luck
ReplyDelete@ Aryo : oke sob.. mana yang lebih bagus menurut kita..ya itu yg terbaik..
ReplyDelete@ Kavke-santi : hehe.. okay :D
@ Wilyo Alsyah : Pasti..Semangat Blogging sob.. ;-)
@ Dhana : silahkan baca-baca dhana :-)
wew,, ilmu
ReplyDeleteSalam Kenal
ReplyDeleteMantap, 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
waw ada aja yang baru disini yah mantap juga ulasannya thanks ya izin pakai yah Astaga.com lifestyle on the net
ReplyDeletenowgoogle.com Multiple Search Engine
Thanks sob..sangat bermanfaat tipsnya...
ReplyDeleteklo yang untuk iklan melayang tau gak????...
Sob..klo iklan melayang tau gak??? mohon pencerahannya sob...
ReplyDeletewa mau nanya! lok timer di sudut,gmn??tp maksh infonya..
ReplyDeletewah info nya sangat membantu banget . . . thx gan
ReplyDeletekeren.....dah berhasil
ReplyDelete@ Post : berbagi ilmu gan.. :D
ReplyDelete@ 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.. ;-)
http://robertbongso.blogspot.com
ReplyDeleteTop Blog... IS The Blog....
mantap nich sob. langsung menuju ke TKP aja .....
ReplyDeleteDRAGON COM > oke ntar wa mampir gan .. waaaait for me ;)
ReplyDeleteBlogger Newbie > silahkan dicoba gan.. :D
Artikel2 nya bagus2 mas, buat newbi sepertiku sangan bermanfaat skali.:X
ReplyDeletehttp://wisatasibolga.co.cc
ReplyDeletemantabbbbbbbbbbb..... bner
ada yang lain yar lebih paham lagi
hadi > Siiip.. sy senang sekali kalo emg bermanfaat buat sahabat blogger lainnya.. ;)
ReplyDeleteagus > :D ...ada tutor lainnya liat aj di daftar isi tutorial blogging sob.. :)
@Kang Deni Ahmad:
ReplyDeletenananna
@alwanz:
ReplyDeletekenal ya dg kang deni ahmad ?
thank ya gan
ReplyDeletewah..
ReplyDeletemakasih infonya mas...
:))
:p
ReplyDeletesip...!!!! trimaksih yah atas ilmunya!!!!
ReplyDeletekk cranya buat links berkedip-kedip
ReplyDeleteTlong Follow aq donk sob, krn aq bru punya blog di sni http://liberty-aries.blogspot.com/
ReplyDeleteaq udah follow di blog km... @
gan saya udah follow yg naman ya ™_DIMAS_RADITYATAMA_™
ReplyDeletegan kok saya ga bisa si malah kaya biasa
udah bisa ni makasih ya ok !! ;) ;) ;) ;) ;)
ReplyDeletethanks berguna
ReplyDeletenice info gan......
ReplyDelete:)
Thanks Gan, Mantapz...
ReplyDeletewah banyak nih tutorialnya
ReplyDeletetukeran link donk, atau share link yuk
punya aku www.cahayanusamadani.com
minta dilike ya
thanks for solution
ReplyDeleteblogwalking visit myblog
http://review-myblogsites.blogspot.com