Drop Down dengan posisi fixed. Mouse anda di scroll jauh kebawah Drop Down masih akan tampak dilayar anda. IE5 dan IE6 tidak akan terlihat.
Demo :
lihat di pojok layar anda !.
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah Pertama
Penempatannya
dibawah <b:skin><![CDATA[
........
diatas </head>
<style type="text/css">
#ddn{
position: fixed;
visibility: hidden;
}
* html #ddn{ /* Akan menyembunyikan IE5 dan IE6 */
display: none;
}
#ddn select{
background-color: lightyellow; /* Warna Background */
}
#ddn.gobutton{
font-weight: bold;
padding: 0 3px;
text-decoration: none;
}
#ddn.gobutton:hover{
background-color: #FFE242;
}
</style>
<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Drop Down di Pojok by JavaScript Kit (http://www.javascriptkit.com/script/script2/alwayscombo.shtml)
***********************************************/
var alwayscombo={
location: ["top", "right"], //Untuk Posisi "top atau bottom", "left atau right"
addoffset: [10, 15], //Menentukan posisi lebih khusus
comboid: "ddn",
////////Stop editing past here///////////////////
navigate:function(){
var selectobj=this.comboref.getElementsByTagName("select")[0]
if (selectobj.options[selectobj.selectedIndex].value!="default")
window.location=selectobj.options[selectobj.selectedIndex].value
},
floatcombo:function(){
var docElement=(document.compatMode=='CSS1Compat')? document.documentElement: document.body
if (this.location[0]=="top")
this.comboref.style.top=0+this.addoffset[0]+"px"
else if (this.location[0]=="bottom")
this.comboref.style.bottom=0+this.addoffset[0]+"px"
if (this.location[1]=="left")
this.comboref.style.left=0+this.addoffset[1]+"px"
else if (this.location[1]=="right")
this.comboref.style.right=0+this.addoffset[1]+"px"
},
init:function(){
this.comboref=document.getElementById(this.comboid)
this.comboref.style.visibility="visible"
this.floatcombo()
}
}
if (window.addEventListener)
window.addEventListener("load", function(){alwayscombo.init()}, false)
else if (window.attachEvent)
window.attachEvent("onload", function(){alwayscombo.init()})
//]]>
</script>
Langkah Kedua
Penempatannya
dibawah <body>
........
diatas </body>
<form>
<div id="ddn">
<select size="1" onChange="alwayscombo.navigate()">
<option value="default" selected="true" style="background-color: #532900; color: white;">--SELECT AN OPTION--</option>
<option value="http://nanoyulianto.blogspot.com/2011/01/tips-trik-tutorial-blogger.html">Tutorial Blogger</option>
<option value="http://nanoyulianto.blogspot.com/2011/01/tutorial-kode.html">Tutorial Kode</option>
<option value="http://nanoyulianto.blogspot.com/2011/01/pernak-pernik-template-blogger-penuh.html">Pernak Pernik</option>
</select>
<a href="#" onClick="alwayscombo.navigate(); return false" class="gobutton">Go</a>
</div>
</form>
Credit : JavaScript Kit
Alhamdulillah
0 comments:
Posting Komentar