Demonya bisa sobat lihat pada Blog Saya ini, pada pojok kanan atas.
Keren kan? terlihat Elegant kalau menurut saya. hhaha ...
Sebenarnya trik ini berkaitan juga dengan posting Cara Membuat Menu Melayang yang dulu. Atau sama saja dengan Membuat Float Box dengan Efek Opacity. Hanya saja postingan ini adalah gabungan antara keduanya, meskipun agak beda-beda dikit kodenya. hhha..
ya langsung sajalah, ini dia ...
jreeng ... jrenngg ..
- Seperti biasa, Login dulu ke Blogger sobat
- Pilih Rancangan
- Lalu Pilih tambah Gadget > Pilih tamabah HTML/Javascript
- lalu masukan kode berikut
<style type="text/css">
#hitsukeFX{
position:fixed;
top:20px;
z-index:+1000;
}
.hitsukeFXtab{
height:100px;
width:55px; float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijzvmpPAfHh3FGTieyUsIcmlE4JlAzHw9UK6Sjf2TUchFq1pzOG_i7RLVOkMbbuv-JRg3dHNwk4-D-OlaimugNm_MndEk-Auo_f5P0hhebe4zc5SQYUPuqFrcg3rKhs8xC0_n4ngyWqfGH/') no-repeat;
}
.hitsukeFXcontent{ float:left;
border:2px solid tranparent;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
background: #000000;
padding:2px;
opacity:0.4;-moz-opacity:0.4;filter:alpha(opacity=40);
}
.hitsukeFXcontent:hover {
opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);}
</style> <script type="text/javascript">
function showHidehitsukeFX(){
var hitsukeFX = document.getElementById("hitsukeFX");
var w = hitsukeFX.offsetWidth;
hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
hitsukeFX.opened = !hitsukeFX.opened;
}
function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }
</script>
<div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
<div class="hitsukeFXcontent">
Kode Widget/konten kamu disini
<div style="text-align:right">
<a href="javascript:showHidehitsukeFX()"> [close!] </a>
</div>
</div>
</div>
<script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>
- Lalu klik Simpan
- Jadi deh menu melayang sobat ,...
ya mungkin itu saja yang bisa saya posting tentang Float Menu ini..
Jika ada hal yang kurang jelas saya rekomendasikan untuk bertanya melalui kotak komentar atau pada chatbox blog ini.
terima kasih sobat ....
Salah satu cara memberikan "servis terbaik" kepada pembaca atau pengunjung blog adalah dengan memberikan ciri khusus pada jawaban komentar yang dibuat autor. Dengan cara ini maka komentar pengunjung dan jawaban yang berupa komentar dari author akan terlihat dengan sangat jelas. Beberapa cara bisa dilakukan misalnya dengan membuat bentuk teks berbeda atau dengan cara memberi background pada box yang berisikan komentar pengunjung atau sebaliknya pada komentar autor (jawaban komentar). Untuk membuat bentuk kolom komentar yang sangat menarik ini, tidak boleh tidak kita harus membongkar template guna menyimpan kode CSS dan xHTML pada bagian header dan body. Untuk penyimpanan xHTML dengan amat terpaksa juga harus kita lakukan melalui 
Setelah sekian postingan telah terupdate bukan mengenai CSS3 sekarang muncul lagi trik tentang CSS3. Mungkin banyak teman - teman saya yang menunggu postingan tentang css3 namun tidak saya tanggapi karena ada kesibukan offline namun sekarang saya berikan walaupun tidak banyak. Trik CSS3 kali ini tentang cara Tombol dinamis dengan CSS3, pada postingan sebelumnya mengenai 
RSS FeedBurner
@UnoZoneuTM on Twitter