Jika anda klik Random, akan memilih secara acak kemana anda menuju.
Demo :
Drop Down Pertama :
Drop Down Kedua :
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah Pertama
Penempatannya
dibawah ]]></b:skin>
........
diatas </head>
<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Drop Down Random Link by JavaScript Kit (http://www.javascriptkit.com/script/script2/animatedcombo.shtml)
***********************************************/
var animatedList={
navigate:function(selectId){
this.selectObj=document.getElementById(selectId)
window.location=this.selectObj[this.selectObj.selectedIndex].value
},
randomizeInit:function(selectId){
this.selectObj=document.getElementById(selectId)
this.curframe=0
this.optionscount=this.selectObj.options.length
//calculate number of frames to animate (cycle through options before settling on one)
this.maxframes=Math.floor(Math.random()*this.optionscount)+Math.floor(Math.random()*this.optionscount)
this.randomize()
},
randomize:function(){
if (this.curframe<this.maxframes)
this.selectObj.selectedIndex=this.settledIndex=(this.curframe<this.optionscount)? this.curframe : this.curframe-this.optionscount
else{ //settle on and select this option
this.selectObj.selectedIndex=(this.selectObj.selectedIndex==-1)? this.settledIndex : -1
}
this.curframe++
if (this.curframe<this.maxframes+4) //Keep running this function until "maxframes" cycle plus 4 (4 being cycle for highlighting selected option)
setTimeout("animatedList.randomize()", 100)
else
window.location=this.selectObj[this.selectObj.selectedIndex].value
}
}
//]]>
</script>
Langkah Kedua
Penempatannya
dibawah <body>
........
diatas </body>
Drop Down Pertama :
<form>
<select id="webdevlinks" size="6" onChange="animatedList.navigate('webdevlinks')">
<option value="http://nanoyulianto.blogspot.com/2011/01/pernak-pernik-template-blogger-penuh.html">Pernak-Pernik</option>
<option value="http://nanoyulianto.blogspot.com/2010/09/template-n2y-eksperiment.html">N2y Eksperiment</option>
<option value="http://nanoyulianto.blogspot.com/2010/08/template-n2y-sedikit-mirip.html">N2y Sedikit Mirip</option>
<option value="http://nanoyulianto.blogspot.com/2010/08/template-n2y-suka-suka.html">N2y Suka-Suka</option>
<option value="http://nanoyulianto.blogspot.com/2010/09/template-n2y-shadow.html">N2y Shadow</option>
<option value="http://nanoyulianto.blogspot.com/2010/09/template-n2y-biasa.html">N2y Biasa</option>
<option value="http://nanoyulianto.blogspot.com/2010/10/template-n2y-spesial-jumbo.html">N2y Spesial Jumbo</option>
<option value="http://nanoyulianto.blogspot.com/2010/10/template-n2y-sweet-jquery.html">N2y Sweet JQuery</option>
<option value="http://nanoyulianto.blogspot.com/2010/10/template-n2y-serba-berjalan.html">N2y Serba Berjalan</option>
</select><br />
<input type="button" onClick="animatedList.randomizeInit('webdevlinks')" value="Random Link!" />
</form>
Drop Down Kedua :
<form>
<select id="newslinks" size="1" onChange="animatedList.navigate('newslinks')">
<option value="http://nanoyulianto.blogspot.com/2011/01/pernak-pernik-template-blogger-penuh.html">Pernak-Pernik</option>
<option value="http://nanoyulianto.blogspot.com/2010/09/template-n2y-eksperiment.html">N2y Eksperiment</option>
<option value="http://nanoyulianto.blogspot.com/2010/08/template-n2y-sedikit-mirip.html">N2y Sedikit Mirip</option>
<option value="http://nanoyulianto.blogspot.com/2010/08/template-n2y-suka-suka.html">N2y Suka-Suka</option>
<option value="http://nanoyulianto.blogspot.com/2010/09/template-n2y-shadow.html">N2y Shadow</option>
<option value="http://nanoyulianto.blogspot.com/2010/09/template-n2y-biasa.html">N2y Biasa</option>
<option value="http://nanoyulianto.blogspot.com/2010/10/template-n2y-spesial-jumbo.html">N2y Spesial Jumbo</option>
<option value="http://nanoyulianto.blogspot.com/2010/10/template-n2y-sweet-jquery.html">N2y Sweet JQuery</option>
<option value="http://nanoyulianto.blogspot.com/2010/10/template-n2y-serba-berjalan.html">N2y Serba Berjalan</option>
</select> <input type="button" onClick="animatedList.navigate('newslinks')" value="Go" /> <input type="button" onClick="animatedList.randomizeInit('newslinks')" value="Random" />
</form>
<option value="http://nanoyulianto.blogspot.com/2010/10/template-n2y-serba-berjalan.html">N2y Serba Berjalan</option>
yang berwarna merah disesuaikan.
Credit : JavaScript Kit
Alhamdulillah
0 comments:
Posting Komentar