بِسْÙ…ِ اللّÙ‡ِ الرَّØْÙ…َÙ†ِ الرَّØِÙŠْÙ…
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="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCb3EqVLqXt0t_a_26Pv7mdA9DrgOIlFNhDPp9DMee4cOxvrzbqSIbTNUohQ0Drlj6i9RC18guRe76_oEgoG4dAzxNaImo0Y8-3Fuj_4wXiKOMiYM1b4J3pxPPeL6LAtnJhnJeH9r9hhM//" /></a>
</center>
<center>
<a href="
http://www.facebook.com/fuad.cakep"target=_blank"><img style="width: 80px; height: 80px;" border="0" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOHFWPGOSfyekMSHyeB_wO2VPyXRCvnPv3BJPDj-ke0WgFP7WdfajBaH96bsWCH7Uje6SbwJCQoSVIAdhyF9Int23eQmNY7RMfaIz4f_oIsCzp8-duMDoGk9JqQbpKj73_bF1dCGuTK_A//" /></a>
</center>
<center>
<a href="
http://twitter.com/fivers_pacitan"target=_blank"><img style="width: 80px; height: 80px;" border="0" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiLYTTMiQ51EQ6pAVWLIjihs8KSVkBiCQ3pLiE7VCIjk34ORFm3dakhl98i1cbzE3ETkpcrIb7rom0OnAGdFW91HRR3xT5nwhRBa72SdmqkShga5Xp6-aQ3PBRDUEcQdHVkldOXA6zClg//" /></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"
) dan tunggu sampai proses restorasi selesai.
