Kali ini, link sebagai kategorinya. Jika anda klik link, menu didalam Drop Down akan berganti sesuai kategori.
Demo :
Tutorial Blogger | Tutorial Kode | Template Blogger
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Penempatannya
dibawah <body>
........
diatas </body>
<form name="dynamiccombo">
<select name="stage2" size="1">
<option value="#">This is a Place Holder</option>
<option value="#">This is a Place Holder</option>
<option value="#">This is a Place Holder</option>
</select>
<input type="button" name="test" value="Go!"
onClick="gothere()"/>
</form>
<script type='text/javascript'>
//<![CDATA[
//Drop Down dengan kategori link by JavaScript Kit (http://www.javascriptkit.com/script/script2/multicombo.shtml)
//Kategori Pertama :
var combo1=new Array()
combo1[0]=new Option("Cara membuat Blogspot","http://nanoyulianto.blogspot.com/2010/05/cara-membuat-blog-buat-pemula-di.html")
combo1[1]=new Option("Teks","URL anda")
combo1[2]=new Option("Teks","URL anda")
combo1[3]=new Option("Teks","URL anda")
combo1[4]=new Option("Teks","URL anda")
//Kategori Kedua :
var combo2=new Array()
combo2[0]=new Option("HTML","http://nanoyulianto.blogspot.com/2010/12/tutorial-kode-html.html")
combo2[1]=new Option("Teks","URL anda")
combo2[2]=new Option("Teks","URL anda")
combo2[3]=new Option("Teks","URL anda")
//Kategori Ketiga :
var combo3=new Array()
combo3[0]=new Option("Pernak Pernik","http://nanoyulianto.blogspot.com/2011/01/pernak-pernik-template-blogger-penuh.html")
combo3[1]=new Option("Teks","URL anda")
combo3[2]=new Option("Teks","URL anda")
var cacheobj=document.dynamiccombo.stage2
function populate(x){
for (m=cacheobj.options.length-1;m>0;m--)
cacheobj.options[m]=null
selectedarray=eval(x)
for (i=0;i<selectedarray.length;i++)
cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value)
cacheobj.options[0].selected=true
}
function gothere(){
location=cacheobj.options[cacheobj.selectedIndex].value
}
populate(combo1)
//]]>
</script>
<p><a href="javascript:populate(combo1)">Tutorial Blogger</a> | <a href="javascript:populate(combo2)">Tutorial Kode</a> | <a href="javascript:populate(combo3)">Template Blogger</a></p>
Credit : JavaScript Kit
Alhamdulillah
0 comments:
Posting Komentar