Pages

Cara Memasang Menu Navigasi Horizontal

Cara Memasang Menu Navigasi Horizontal - Pada tutorial blog kali ini, saya ingin membagi sedikit tips bagaiman cara membuat menu navigasi horizontal, sebagai contoh sobat bisa lihat pada blog ini, ya mirip punya blogger senior kita ya itu O-om.com.

Bagaiman sobat tertarik untuk membuatnya silahkan lanjutkan baca.
Oke sobat langsung ke TKP.

Yang pertama pastinya sobat harus login ke akun blognya

pilih Rancangan - Edit HTML
sebelumnya download dulu templatenya agar bila terjadi kesalahan dapat dikembalikan kembali.
kemudian centang pada tulisan Expand Widget Templates.
 Copy CSS berikut :
/*-- (Menu/Nav Bottom widget banner) --*/
#nav-element-bottom{ width:900px; margin:0; padding:2px 0 0px 0;}
#nav-element-on-bottom{background:#fff;width:900px; margin:0; padding-left:12px;padding-top:10px}

/* SEARCH */
#src-m{border:1px solid #999;  height:18px; width:180px; padding-top:0px;  background:#f6f4f4; }
#src-m input{border:0;  background:none;  color:#777}
#s-m{font-size:12px; width:180px; padding-left:4px;  margin:0;  background:none}
#tsrc-m #src-m{margin-top:0px;background-color:#FFFFFF;border:1px solid #000000; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px}
#tsrc-m #s-m{width:155px}

/*-- (Menu/Nav) --*/
#nav-element{width:900px; margin:0; padding:0px 0 0px 0; float:center}
#nav{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgevP2bT0k5-tBPuTUJWuRNhDP7RHhOBtZBQs1HXlDzEL2WeWbF-P6wSe7TYRumzqVoOLh21yBuzgIpdoYDaT38bOq8eHwJ8g4JNHQ-O_MNsryWnFd2cO5TV4MuEBbsk8HPolBJmXeDhBHu/s1600/topmenu-c.png) no-repeat; height:32px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto;}
#nav-left{float:left; display:inline; width:700px; padding-left:6px; padding-top:1px}
#nav-right{float:right; display:inline; width:170px;  padding-top:3px; padding-right:20px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Verdana,Arial,Helvetica,sans-serif; font-weight:bold}
#nav ul li{float:left;  list-style:none}#nav ul li a, #nav ul li a:visited{ display:block; color:#fff; margin:1px 4px; padding:4px 2px; text-decoration:none;}
#nav ul li a:hover{background-color:#222; color:#fff; background-color:#999; margin:1px 4px; padding:4px 2px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{color:#fff; background-color:#999; margin:1px 3px; padding:4px 2px; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px}
Letakkan Kode Tersebut sebelum ]]></b:skin>  (tekan ctrl + F untuk mempercepat pencarian)

Kemudian Copy kode Berikut :
<div id='nav-element'>
<div class='widget-content'>
<div id='nav'>
<div id='nav-left'>
<ul>

<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi60SFjZCnU5gDUNXNvzql7aHWaPdiNHgiiyH2yA00pnG0BKpeectaediTPg1p0JAJSLkEwFVZMopKREGwVMzjsUBYszIZt3DV_46BA4keHhrQ_C2-aZK2GcRcdgINapa4nYe3crgoaZx47/s200/icon-home.png' style='padding:0px;'/></a></li>
<li><a href='isi URL' >Nama</a></li>
<li><a href='isi URL' >Nama</a></li>
<li><a href='isi URL'>Nama</a></li>
<li><a href='isi URL'>Nama</a></li>
<li><a href='isi URL'>Nama</a></li>

</ul>
<script language='javascript'>setPage()</script>
</div>
<div id='nav-right'>
<div id='tsrc-m'>
<div id='src-m'>
<form action='/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel..&quot;;}' onfocus='if (this.value == &quot;Cari artikel..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj4UyZdYnvwI4S3j_IOB17oZCvRFCPviCVTbSFlJcnfReQiFvwrHdJUruW5Sjn5Pv2QY5bcdTjoEOBdLtRRdoKL_1BALD1cj8hOZbIgoj8p210Xpo__rnUTH66QVShYiP2PaGeUk93XMM/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

<div id='nav-element-bottom'>
<div class='nav-element-on-bottom section' id='nav-element-on-bottom'/>
</div>
  • Jika sobat ingin meletakkan menu navigasi ini sebelum header seperti pada blog ini, silahkan cari kode <div id='header-wrapper'> kemudian pastekan setelah kode tersebut
  • Jika ingin meletakkan dibawah header cari kode <div id='content-wrapper'> letakkan kode diatas sebelum <div id='content-wrapper'>
Bagamana Sobat, mudah bukan cara membuat menu navigasi horizontal ?
Labels: