Membuat Menu "Floating" Agar Hemat Tempat

Written By Enda Fivers on 25 September 2010 | Saturday, September 25, 2010

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْم
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....
Five Minutes<< 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="http://lh3.ggpht.com/_yF0--u7KSSI/TJDfKZAVEYI/AAAAAAAAAfA/KmkZuCOwHfw/B-Award.png" /></a>
</center>
<center>
<a href="http://www.facebook.com/enda.fivers"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/endafivers"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"




27 comments:

kisah abu nawas said...

sangat bermanfaat untuk menghemat tempat
ingin menjajalnya sob

fathoni said...

mau ku coba sobat.... mksh inponya

kisah abu nawas said...

tipsnya bagus sob

BRI Jakarta Veteran said...

wah nice tip sahabat dapat mengoptimasi sapce blog, ijin tuk disimpan untuk dipelajari. Salam

BRI Jakarta Veteran said...

wah nice tip sahabat dapat mengoptimasi sapce blog, ijin tuk disimpan untuk dipelajari. Salam

Dhana/戴安娜 said...

salam sahabat
xixixi yang ini mah saya malah baru dnger bisa menghasilkan yang bagus gitu yach,thnxs n good luck

vini vidi vucinic said...

Mungkin di blog saya kurang berfungsi dengan baik. Soalnya lebar blog saya maksimal-kan width = 1150, jadi udah tdk ada tempat di kedua sisinya. BTW, nice info Sob, ntar kalo udah bosan dengan lay out yg sekarang bisa dicoba. Sekalian ijin copas....

about adsense said...

ada contohnya ega'? kan kalo di blog ini ada contohnya lebih enak,,, saran aja lho....

M Faroz Turun Gunung said...

Keren banget sob...nice info boleh dicoba

Zona Indonesia said...

Blogwalking and visiting.... nice tips... Thanks and Peace :)

zen said...

kang, bisa minta contohnya gak? kan lebih enak :)
mampir juga ya

zen said...

kang, bisa minta contohnya gak? kan lebih enak :)
mampir juga ya

IF info said...

bagus sob tutorialnya, boleh dicoba nih

MULTIMEDIA SMKN 4 SEMARANG said...

wah...
blognya keren...
bisa dicoba itu artikelnya....

Kukuh Cakra said...

artikel yg bagus gan ! keep blogging

Blogg Untuk Anda said...

Wah Info Mantap Nih..Makasih Gan :)

PUSHTOP ® said...

wah ternyata di dunia blogger juga harus berhemat ya.....ckckck
salam kenal gan....jangan isi buku tamu doang donk...xixixi

Onjou said...

SALAM KENAL KAWAN BAGI YANG INGIN TUKERAN FOLLOW MAMPIR KE BLOG SAYA TERIM KASIH SALM PERSABATAN

BeDa said...

Hemat tempat selain membuat pengunjung nyaman juga membuat blog lebih menarik jika tampilannya ditata dengan baik. Terima kasih tutorialnya.

Salam ukhuwah

Parenting said...

Lebih hemat tempat lebih baik. Pengaruh ke berat blog gak ya?

Headline News said...

trik yang menarik gan...
penggunaan trik ini harus sesuai dengan nice blog yg kita buat, salah satunya adalah blog design, kalo blog informasi yah kurang cocok

z33s said...

sangat kreatif bikin gambar sama ikon nya...

Semangat terus kawan ...

zaenal said...

Kang.. bisa diajarin ngumpetin follower dong.. Thanks.

dotkop said...

sob, url show/hide nya kan kalo gak salah tanda plus [+] itu tempatnya dimana sob???

tips belajar guitar said...

mas matur nuwon sanget infonya mas,,,,,,,,,,,,

ki bodo said...

trims infonya sob, salam kenal..

zam said...

mantap, sekarang bisa buat deh ! trms banyak y Mas Admin telh berbagi post nya !