Membuat Menu Horizontal Navigasi

Kali ini saya mau memposting tentang bagaimana cara membuat dan menambahkan menu horizontal navigasi pada blogger template. Sebagai contohnya kalian bisa lihat seperti gambar di bawah ini. Bentuknya simpel dan hanya memainkan perpaduan warna (background-color) saja sehingga kalian dapat menyesuaikannya dengan warna template blog yang kalian miliki. Bentuk menu horizontal navigasi ini saya kasih warna hitam dan untuk menyesuaikan warna dengan template kalian, tinggal kalian ganti kode warnanya saja.

Baiklah teman mari kita mulai pekerjaan kita untuk membuat menu horizontal navigasi tersebut pada template kalian. Masih sama dengan tutorial-tutorial sebelumya, pergilah ke bagian "Edit HTML" template blog kalian dan dengan menggunakan Ctrl-F pada keyboard carilah kode ]]></b:skin> kemudian letakkan kode css di bawah ini tepat di atas kode ]]></b:skin> tersebut.

Kode Css

/*  Horizontal Navigasi
---------------------------------------------- */
#nav-wrapper {
background: #000000;
width: 100%;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #ffffff;
font-weight: bold;
margin: 0 auto;
padding: 0;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
.nav {
margin: 0px;
padding: 0px;
list-style: none;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.nav li {
float: left;
margin: 0px;
padding: 0px;
}
.nav a, .nav a:visited {
background: #222222;
color: #ffffff;
display: block;
font-weight: bold;
margin: 0;
padding: 8px 15px 8px 15px;
}
.nav a:hover {
background: #6e6d6d;
color: #ffffff;
margin: 0;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
.nav li a, .nav li a:link, .nav li a:visited {
background: #333333;
margin: 0;
padding: 7px 10px 7px 10px;
border-left: 1px solid #000000;
}
.nav li  a:hover, .nav li a:active {
background: #666666;
padding: 7px 10px 7px 10px;
}

Untuk menyesuaikan warna menu horizontal navigasi dengan warna template kalian, silahkan kalian ganti kode warna pada kolom kode css di atas yang sudah saya tandai dengan warna biru. Agar kalian tidak repot-repot lagi mencari kode warna, di bawah ini sudah saya siapkan perlengakapannya. Kalian tinggal klik warna yang kalian inginkan dan kode warna tersebut akan terlihat kemudian tinggal kalian copas saja kode warna tersebut.

Jika sudah selesai, masih di bagian yang sama yaitu pada bagian "Edit HTML" tersebut kalian cari lagi kode <div id='header-wrapper'> sehingga akan tampak tampilan kode kira-kira bentuknya seperti di bawah ini.

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='2yu-blog (Header)' type='Header'/>
</b:section>
    </div>

Pada kolom kode diatas yang perlu kalian perhatikan adalah kode yang sudah saya beri warna biru karena tepat di bawah kode itulah kalian letakkan kode menu horizontal navigasi.

kode menu horizontal navigasi

<!-- Horizontal navigasi -->
<div id='nav-wrapper'>
<div class='nav'>
<ul>
<li><a href='http://2yu-blog.blogspot.com/'>Home</a></li>
<li><a href='http://www.blogger.com/profile/18304169321516590996'>My Profil</a></li>
<li><a href='http://2yu-blog.blogspot.com/search/label/Tutorial Blog'>Tutorial Blog</a></li>
<li><a href='http://2yu-blog.blogspot.com/search/label/Widget'>Widgets</a></li>
<li><a href='http://2yu-blog.blogspot.com/search/label/Tips Dan Trik Blog'>Tips Dan Trik</a></li>
<li><a href='http://www.co.cc/?id=163381'>Domain Gratis</a></li>
<li><a href='http://www.ziddu.com/register.php?referralid=(y](}Z.{5up'>File Hosting Gratis</a></li>
<li><a href='http://www.ziddu.com/register.php?referralid=(y](}Z.{5up'>Daftar Isi</a></li>
</ul>
</div>
</div><!-- Akhir dari horizontal navigasi -->

Pada kolom kode menu horizontal di atas, tulisan yang sudah saya beri warna merah silahkan kalian ganti dengan URL atau alamat yang ingin dituju dan tulisan yang berwarna biru silahkan kalian ganti dengan bahasa kalian masing-masing.

Nah kalau sudah selesai, simpan template kalian dan lihat blog. Horee..!! kalian telah berhasil membuat menu horizontal navigasi. ~ Congratulations ~