Membuat Menu "Floating" Agar Hemat Tempat

Written By Phuad Cahyono on 23 Jul 2011 | 02.01


بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْم
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://Aulianet-online.blogspot.com/"><img border="0" src="http://lh3.ggpht.com/_yF0--u7KSSI/TJDfKZAVEYI/AAAAAAAAAfA/KmkZuCOwHfw/B-Award.png" /></a>
</center>
<center>
<a href="http://www.facebook.com/fuad.cakep"target=_blank"><img style="width: 80px; height: 80px;" border="0" src="http://lh4.ggpht.com/_yF0--u7KSSI/TJDbAbSypQI/AAAAAAAAAe4/JZCY76U2Bkw/facebook-screw.png" /></a>
</center>
<center>
<a href="http://twitter.com/fivers_pacitan"target=_blank"><img style="width: 80px; height: 80px;" border="0" src="http://lh3.ggpht.com/_yF0--u7KSSI/TJDbAc6BzbI/AAAAAAAAAe8/P5eDIxAKwTs/twitter-screw.png" /></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"


"By Enda Fivers"





0 komentar:

Follow by Email

Pengikut