membuat menu floating di kiri/kanan blog

Share |

"Menu Floating" itu nama yang saya ambil ketika saya meng-update Membuat Chat Box Absolute Vertical Sliding Panel Dikarenakan floating dalam bahasa indonesia yaitu mengambang. Maka dari itu widget kali ini akan selalu mengambang dan selalu mengikuti arah scroll. 


Menu Floating ini merupakan sedikit modifikasi dari kode untuk membuat Cbox show/hide, hanya dengan merubah posisi dan membuat backgroundnya jadi transparan.


Ikuti Step by Step:

1. Login Blogger
2. Klik ==>Rancangan =>Elemen Laman
3. Tambah Gadget HTML/Java Script
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://www.m-azka.com/search/label/my%20award"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTtpXoEqi6ekXgocbV2-CjKtdoU0OALdtR_vXLu5u_3qYJCSM_x_BtBpF1XmorI1U7jtHlmeBQFF4txVokgmZc5xQw7joKb8Yllroyct9cBi-KVhUhgdhSJejwiBeI5k54KrrNeFYwD4s/" /></a>
</center>
<center>
<a href="http://www.facebook.com/m.azka.fans"target=_blank"><img style="width: 80px; height: 80px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho7kEd4yGBgSV1b53VGI7lzNopKuMWtadEhCX820KZrxuaOtuP8ajVHZkOjBBd6XmK3bcDD3QhKqwq3g-jigOqx_4dsnKYxHo8v0g-096E_3JyJsmBxRObq49TwE_HebxVRSvQCevr7oo/" /></a>
</center>
<center>
<a href="http://twitter.com/mazkac"target=_blank"><img style="width: 80px; height: 80px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTuZirwvGZHckMTAtAoISzaYesb4O3K-gywZGysEtmr4_61vTc1JJdT_HskCNFvuc0v0XY-bQCnSP3j7xhHWI-Q40ewoADvaPo6vZcvK_tjpBYCmLpkWtDlMqjFXy5y4dgIUG1bv5Lxc/" /></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. Lalu Save Template, Lihat hasilnya dan enjoy!


Keterangan:

- Kode warna biru : url image untuk "show/hide" menu [Tidak diganti juga tidak apa-apa]

- Kode warna orange : URL/Link tujuan icon sobat

- Kode warna merah : URL Icon [sobat dapat juga menggantinya dengan Icon yang lain]
- Kode warna Hijau : Bisa diganti dengan right bila ingin di kanan.

- Icon yang digunakan saat ini:

  

- Menu bisa ditambahkan dan ini kodenya :

<center>

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

</center>

Artikel Terkait