MEMBUAT MENU NAVIGASI HORIZONTAL

Share this article on :

Tweet

Menu navigasi dibuat bertujuan untuk mempermudah pengunjung melihat suatu artikel pada blog/website berdasarkan kriteria atau label. Atau juga bisa berupa link yang bisa  dikunjungi. Contohnya kita akan melihat artikel yang membahas tentang anti virus maka untuk lebih mempermudah pengunjung melihat artikel yang dicarinya maka kita bisa membuat menu navigasi yang kita beri label Anti Virus contohnya. Ok. kita langsung praktekan saja bagaimana cara membuat menu navigasi horizontal tersebut.

- Login ke Dasbor blog.

- Masuk ke Rancangan.

- Pilih edit HTML.

- Jangan lupa centang kotak Expand Template Widget.

- Agar lebih aman dan untuk menghindari hasil edit yang amburadul/tidak berhasil ada baiknya sobat download template lengkap terlebih dahulu.

- Cari tag :

]]></b:skin>

masukan kode di bawah ini di atas tag tersebut.

/* navbar

================== */

#bg_nav {

background: #1E1C10;

width: 950px;

height: 35px;

font-size: 13px;

font-family: Arial, Tahoma, Verdana;

color: #FFFFFF;

font-weight: bold;

margin: 0px auto 0px;

padding: 0px;

border-top: 2px solid #333;

border-bottom: 2px solid #333;

overflow: hidden;

}

#bg_nav a, #bg_nav a:visited {

color: #FFFFFF;

font-size: 11px;

text-decoration: none;

text-transform: uppercase;

padding: 0px 0px 0px 3px;

}

#bg_nav a:hover {

color: #FFFFFF;

text-decoration: underline;

padding: 0px 0px 0px 0px;

}

#navleft {

width: 950px;

float: left;

margin: 0px;

padding: 0px;

}

#navright {

width: 220px;

font-size: 11px;

float: right;

margin: 0px;

padding: 5px 5px 0px 0px;

}

#navright a img {

border: none;

margin: 0px;

padding: 0px;

}

#nav {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav a, #nav a:visited {

background: #1E1C10;

color: #FFFFFF;

display: block;

font-weight: bold;

margin: 0px;

padding: 8px 23px 8px 23px;

border-left: 0px solid #333;

}

#nav a:hover {

background: #FF0000;

color: #FFFFFF;

margin: 0px;

padding: 8px 23px 8px 23px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-bottomright: 20px;

-webkit-border-radius-topleft: 20px;

-webkit-border-radius-bottomright: 20px;

-khtml-border-radius-topleft: 20px;

-khtml-border-radius-bottomright: 20px;

border-top-left-radius: 20px;

border-bottom-right-radius: 20px;

text-decoration: none;

}

#nav li {

float: left;

margin: 0px;

padding: 0px;

}

#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 150px;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #1E1C10;

width: 220px;

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #333;

border-left: 0px solid #333;

border-right: 0px solid #333;

}

#nav li li a:hover, #nav li li a:active {

background: #333;

padding: 7px 30px 7px 10px;

}

#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}

#nav li:hover ul {

left: auto;

display: block;

}

#nav li:hover ul, #nav li.sfhover ul {

left: auto;

}

- Kemudian anda simpan.

- Selanjutnya masuk ke elemen halaman dan tambah gedget.

- Pilih HTML/JavaScript.

- Masukan kode dibawah ini ke dalam konten.

<div id='bg_nav'>

<div id='navleft'>

<div id='nav'>

<ul>

<li><a href="http://nama blog.blogspot.com">Beranda</a></li>

<li><a href="http:///nama blog.blogspot.com/search/label/Software">Software</a></li>

<li><a href="http:///nama blog.blogspot.com/search/label/Komputer">Komputer</a></li>

<li><a href="http://nama blog.blogspot.com/search/label/About me">About me</a></li>

(tambahkan menu sesuai keinginan anda disini seperti contoh di atas)

</ul>

</div>

</div>

<div id='navright'>

    </div>

</div><!-- akhir bg_nav -->

- Klik simpan.

- Jangan lupa pada setiap postingan beri label sesuai keinginan sobat.