Amazing

Untuk memudahkan pengunjung blog mencari artikel atau tulisan yang diinginkan maka penting sekali fungsi navigasi. Navigasi bar horizontal seperti home, kontak, yang biasanya ada diatas membantu pengunjung blog mencari artikel atau tulisan yang diinginkan. Tetapi navigasi bar tersebut cukup memakan tempat atau ruang blog kita sementara banyak label atau tag yang ingin kita tampilkan. Untuk mengatasi masalah tersebut kita dapat menggunakan "Jump Menu" yang tidak memakan ruang atau tempat dari blog kita tetapi isinya dapat memuat banyak label atau tag.

Untuk membuat Jump Menu, langkah-langkahnya adalah sebagai berikut :

Masuk / Login ke Blog anda. (Blogger)
Pilih menu "Tata Letak"
>> Klik "Tata Letak" >> Klik "Tambahkan Widget" >> pilih "HTML / JAVASCRIPT".
Atur posisi widget Html yang berisi script jump menu anda ditempat yang anda inginkan.
Masukkan kode script berikut kedalam bidang widget "HTML / Javascript" tersebut.

Kode script

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Jump Menu
<script type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_jumpMenuGo(selName,targ,restore){ //v3.0
  var selObj = MM_findObj(selName); if (selObj) MM_jumpMenu(targ,selObj,restore);
}
//-->
</script>



<form name="form1" id="form1">
  <select name="menu link" onchange="MM_jumpMenu('parent',this,0)">
    <option value="http://agrace2011.blogspot.com/" />BERANDA
    <option 

value="http://agrace2011.blogspot.com/search/label/INSPIRATIF" />INSPIRATIF
    <option 

value="http://agrace2011.blogspot.com/search/label/TOKOH" />TOKOH
    <option 

value="http://www.agrace2011.blogspot.com/search/label/KISAH" />Kisah
    <option 

value="http://agrace2011.blogspot.com/search/label/QUOTES" />QUOTES
    <option 

value="http://agrace2011.blogspot.com/search/label/Komputer" />KOMPUTER
    <option 

value="http://agrace2011.blogspot.com/search/label/adobe%20photoshop" />Adobe 

Photoshop
    <option 

value="http://agrace2011.blogspot.com/search/label/Easy%20Gif%20Animator" />Easy 

Gif Animator
    <option value="http://agrace2011.blogspot.com/search/label/Picasa" />Picasa
    <option value="http://agrace2011.blogspot.com/search/label/edit%20video" />Edit 

Video
    <option 

value="http://agrace2011.blogspot.com/search/label/ANIMASI" />ANIMASI
    <option value="http://agrace2011.blogspot.com/search/label/Rohani" />Rohani
    <option 

value="http://agrace2011.blogspot.com/search/label/AYAT%20ALKITAB" />Ayat 

Alkitab
    <option 

value="http://agrace2011.blogspot.com/search/label/KATA%20-%20KATA%20POSITIF" 

 />Kata Positif
    <option 

value="http://agrace2011.blogspot.com/search/label/ANIMASI%20GOMBAL" />gombal
    <option 

value="http://agrace2011.blogspot.com/search/label/Animasi%20Lucu" />Lucu
    <option 

value="http://agrace2011.blogspot.com/search/label/GREETING%20CARD" />KARTU 

UCAPAN
    <option 

value="http://agrace2011.blogspot.com/2012/01/selamat-natal.html" />Natal
    <option 

value="http://agrace2011.blogspot.com/search/label/PASKAH" />Paskah
    <option value="http://agrace2011.blogspot.com/search/label/ULTAH" />Ultah
    <option value="http://agrace2011.blogspot.com/search/label/Film" />FILM
    <option value="http://agrace2011.blogspot.com/search/label/Film%20keluarga" />Film 

Keluarga
    <option value="http://agrace2011.blogspot.com/search/label/Film%20Anak" />Film 

Anak
    <option value="http://agrace2011.blogspot.com/search/label/Film%20Inspiratif" />Film 

Inspiratif
    <option 

value="http://agrace2011.blogspot.com/search/label/Download%20film" />Download 

Film
    <option 

value="http://agrace2011.blogspot.com/search/label/HIBURAN" />HIBURAN
    <option 

value="http://agrace2011.blogspot.com/search/label/Drama%20korea" />Drama 

Korea
    <option 

value="http://agrace2011.blogspot.com/search/label/Drama%20Korea%20yang%20dire

komendasi" />Drama Korea Yang direkomendasikan
    <option 

value="http://agrace2011.blogspot.com/search/label/Drama%20korea%20tahun%20201

2" />Drama Korea tahun 2012
    <option 

value="http://agrace2011.blogspot.com/2012/04/jang-dong-guns-sbs-drama-gentlemans.

html" />Serba-Serbi
    <option value="http://agrace2011.blogspot.com/search/label/Actor%20korea" />Aktor 

Korea
    <option value="http://agrace2011.blogspot.com/search/label/Artis%20korea" />Artis 

Korea
    <option value="http://agrace2011.blogspot.com/search/label/Berita" />Berita
    <option 

value="http://agrace2011.blogspot.com/search/label/intermezzo" />Intermezzo
    <option value="http://agrace2011.blogspot.com/search/label/INFO" />INFO
    <option 

value="http://agrace2011.blogspot.com/search/label/Kecantikan" />Kecantikan
    <option 

value="http://agrace2011.blogspot.com/search/label/Kesehatan" />Kesehatan
    <option 

value="http://agrace2011.blogspot.com/search/label/UNIVERSITAS" />Universitas
    <option 

value="http://agrace2011.blogspot.com/search/label/Tempat" />Tempat
    <option value="http://agrace2011.blogspot.com/search/label/Suku%20Batak" />Suku 

Batak
    <option 

value="http://agrace2011.blogspot.com/search/label/Artikel" />ARTIKEL
    <option 

value="http://agrace2011.blogspot.com/search/label/Motivasi" />Motivasi
    <option value="http://agrace2011.blogspot.com/search/label/Kontes%20Blog/" />Kontes Blog
    <option value="http://agrace2011.blogspot.com/search/label/Kontes%20SEO/" 
/>Kontes SEO
<option value="http://agrace2011.blogspot.com/search/label/Opini/" 
/>OPini
    <option value="http://agrace2011.blogspot.com/search/label/Ceritaku/" />CERITAKU
  </select>
  <input type="button" name="Button1" value="Go" onclick="MM_jumpMenuGo('menu 

link','parent',0)" />
</form>
</!doctype>

Keterangan :

- Untuk kode Url link yang ada pada script diatas diganti dengan kode url masing-masing label atau tag di blog anda.

Contoh atau hasilnya:

JUMP MENU

TATA LETAK

Thursday, August 22, 2013

Cara Mudah Membuat Jump Menu Pada Blog

No comments:

JUMP MENU