Membuat Menu "Floating" Agar Hemat Tempat

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْم

Hmm,,, "menu floating" heheh ga tau deh apa namanya yang pasti menunya bisa mengambang.

Blog yang sempitlah yang memicu saya untuk menggunakan/membuat menu floating ini, karena ga tau lagi mau dipasang dimana menu-menu ini   
Akhirnya saya menemukan ide untuk memasangnya, mau tau caranya??? hehe..bentar ya kita cerita sedikit dulu.. Menu Floating ini merupakan sedikit modifikasidari kode untuk membuatCbox show/hide, hanya dengan merubah posisi dan membuat backgroundnya jadi transparan saja kok heheh....<< klik>>
Baiklah langsung saja saya kasi tau caranya..
1. Login Blogger
2. Klik ==>Rancangan =>Elemen Laman
3. Tambah Gadget HTML/Java Script [di Sidebar aja]

4. Copas kode berikut :

<style>
#hcl { position:fixed;
top:70px;
left:0px; z-index:+1000; }
* html #hcl {position:relative;}

.hcltab {
height:32px;
width:80px;
float:bottom;
cursor:pointer;
background:url('http://png.findicons.com/files/icons/2212/carpelinx/32/add.png')
no-repeat;
}

.hclcontent {
float:bottom;
border:0px solid #926334;
background:transparent 
no-repeat; 
padding:5px;
}

.hc-credit {
font-size:9px
}

.hc-credit a {
text-decoration:none
}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened; } function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 30 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir; hcl.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl"> <div class="hclcontent">

<center>

<a href="http://exeloph.blogspot.com/2010/02/award-dari-sobat-blogger.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitrpLCnNFaHLildgepDZcqQyyhDKW3GYULBtWXqkgQVCIei-dXtTIKTpOfIe8NHpQr2xEbp3xELMc_TkC1DlcRJCi2SH07oUMaetwB4Rj-_tqMeN7_-NbbDrMeetZ23ZHbbw8XVSjLHwM/" /></a>

</center>
<center>

<a href="http://www.facebook.com/enda.fivers"target=_blank"><img style="width: 80px; height: 80px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFuZQD64hjB3V9V-U4RrWpxk4wqH9doqNZVeOzp0Xk6xiK50pqcO4Q_uT_QfNNJCio5iWz-9AZgGYdHtJdXJOcKqB7Lki2_KMPqQmTW01VkNPems_CAHGGcXgkr5ojXr1Kx-N9x1qN_TA/" /></a>

</center>
<center>

<a href="http://twitter.com/endafivers"target=_blank"><img style="width: 80px; height: 80px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQj20-8vUcIoHPdhNleGwDxu5QWIjew7SxyKhbdpbcbSUtDwsB2xTF34HLm59riJIw9FJFTloExsW3wecEAVlk9OjjvmAj0u3ohgAhn4HAA6HPtZNnsFScAK1kgeZz25-_YG8Fkg1TSKw/" /></a>

</center>

</div>
<div class="hcltab" onclick="showHidehcl()">
</div>
</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl"); hcl.style.top = (30-hcl.offsetWidth).toString() + "px";
</script>

5. Simpan

Note : 

- Kode yang berwarna biru adalah url image untuk "show/hide" menu [Tidak diganti juga tidak apa-apa]
- Kode yang berwarna merah adalah URL/Link tujuan icon sobat
- Kode yang berwarna oren adalah URL Icon [sobat dapat juga menggantinya dengan Icon yang lain]
- Dapat ditambahkan beberapa menu lagi sesuai selera sobat dengan menambahkan kode berikut :
 <center>

<a href="LINK SOBAT"><img border="0" src="URL ICON SOBAT" /></a>

</center>

h

"Baiklah sekian dulu tipsnya, maaf kalo ada salah"

By : exeloph.blogspot.com