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 membuat Cbox 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/AVvXsEjCZc5VCglpY_MQ6bB4Y27HT4pupjNeVvR_1Rb4OoTEmAcPyg23ZPEgdNjnU-dAdiRTqbegpZfsKm7igcshKjQ5fstKx4KUKme-cFPCne09aLerGe5Fmr_4-NJQySt8sfUAwMbDpWdfy_g/" /></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/AVvXsEiGA7c0JEV0y2J1kmLC5d5nRccrzLd7GLtHQddLXSiPo6jzsBFRw1ZlDQSADaBz4AyghyphenhyphenRyxpx8Q7PNaVBF6OgixOwbA0PASH5Y_Y_N3f_o8MrwZtJEMmLag3jzcU78slII8NHGQhEwAaw/" /></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/AVvXsEgdbVA296OPiBD-kQ0VHRgnEFC4D9XZkTJ8HupNnX_zED4-4zf02k3xTnbymJtzPic53SpGjdgGdhfS3kfg5-9ronsvQPK7uGCvadxTVIy8cxyMKbNUiE3c0B2Z7xy7H9CSZaSjGMoDI_E/" /></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>

"Baiklah sekian dulu tipsnya, maaf kalo ada salah"

Related Posts by Categories

Posted in: Ilmu Blog