Menu Navigasi Horizontal

Dulu saya pernah mencoba membuat tab navigasi blog seperti yg ada di blog-blog lain. Tanpa ilmu yang cukup, saya mendapati tab navigasi yang saya bikin terlihat kacau balau :D . Setelah saya tau cara membuat tab navigasi blog, terutama navigasi yang tulisannya berjejer mendatar ( Horisontal) , maka saya langsung merubah navigasi semua blog-blog saya yang lain.

Apa yang dimaksud Navigasi Blog ?

Haaa... mungkin diantara sobat ada yang masih belum tau apa yang dimaksud navigasi blog yang saya tulis di artikel ini ? Lihat aja deh gambar dibawah ini :

Apa Manfaat dan Fungsi Navigasi Blog ?

Manfaat dan Fungsi Navigasi blog adalah untuk memudahkan pengunjung blog mencari artikel atau konten yang dibutuhkannya. Navigasi blog juga menjadi salah satu point penting dalam SEO ( Search engine Optimisation )

Langkah Membuat Navigasi Blog

Ada dua cara membuat tab navigasi horisontal dibawah header.
Cara satu dengan fitur membuat tab halaman page dariblogger , yang caranya bisa lihat disini : Tab navigasi Horisontal Halaman Page Blogger

Cara kedua adalah cara manual yang lebih fleksibel untuk pengaturan tampilan sesuai kehendak kita.

Untuk membuat Navigasi blog Horisontal ini , saya menggunakan contoh template SIMPLE Josh Peterson .

Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com

1. Buka dashbor blogger anda pada tampilan blogger lama, dengan pengaturan bahasa umum ke bahasa Indonesia.Lihat disini cara mengatur tampilan dashbor blogger .

2. Klik Tab "Rancangan".

3.Pilih Tab EDIT HTML

4. Kemudian untuk jaga-jaga, silahkan klik link Download Template Lengkap , lalu simpan di hardisk komputer .

5. Setelah membackup template lama, lalu centang kotak Expand Template Widget

6. Klik CTRL + F pada keyboard anda utk mencari kode </header>
gambar dibawah ini screenshot saat saya berada di browser mozilla Firefox.

7. Setelah ketemu tag </header> , copy kode dibawah ini , dan pastekan dibawah tag header tsb.

<!-- univmenucontainer -->
<div id='univmenucontainer'>
  <div id='menu'>
  <ul>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='#'  title='ganti'>About Us</a></li>
    <li><a href='#' title='ganti'>Download</a>
      <ul class='subnav-2'>
        <li><a href='#' title='Ebook'>Ebook</a>
        </li>
        <li><a href='#' title='ganti'>Software</a>
        </li>
      </ul>
    </li>
    <li><a href='#' title='ganti'>Sitemap</a></li>
        <li><a href='#' title='ganti'>Produk</a></li>
   <li><a href='#' title='ganti'>Belum Ada</a></li>
  </ul>
</div>        
</div>
<!-- /univmenucontainer -->

Ganti tanda " # " pada kode diatas dengan URL link lengkap , misalnya URL halaman Page , atau URL postingan blog yang ingin ditampilkan di Tab navigasi blog anda.
Contoh URL lengkap : http://templatepertama1.blogspot.com/p/about.html
Ganti title nya sesuai dengan Link yg anda tampilkan
Ganti keterangan TEXT  : About ; Ebook,SOftware dll dgn Text sesuai dengan link yg ingin ditampilkan.

Contoh lengkap :  misalnya pada navigasi About Us :

<li><a href='http://templatepertama1.blogspot.com/p/about.html' title="Kenalan dulu yuk">About Us</a></li>

8. Setelah anda mem paste kode HTML utk navigasi ,lalu cari lagi dengan tekan CTRL+F pada keybord anda kode tag :  ]]></b:skin>

9. Setelah ketemu, lalu copy kode CSS dibawah ini , dan pastekan diatas kode ]]></b:skin> tadi .

Kode CSS pengatur Navigasi Horisontal :

/* Navigasi horrisontal --*/
#univmenucontainer{
height:26px;
display:block;
margin:5px 0;padding:2px;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;background:#000444;
}
#menu ,#menu ul {
height:24px;
margin: 0 1px;
padding: 0;
list-style: none;
height:24px;
}
#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 5px;
background:#000222;
border-left:1px solid #666;
}
#menu a:hover {
background:#999;
color: #222;
display: block;
text-decoration: none;
background:#0fffff;
border:0.5px solid #666;
}
#menu li {
float: left;
margin:0;
padding: 0;
}
#menu li li {
float: left;
margin: 0px 0px 0px 5px;
padding: 0px;
width: 130px;
background:#aaa;
border:1px solid #666;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background:#0fffff;
width: 120px;
float: none;
margin: 0px;
padding: 2px 10px 2px 10px;
color:#000;
}
#menu li li a:hover, #menu li li a:active {
background:#0fffff;
border:0.5px solid #666;
width: 120px;
float: none;
margin: 0px;
padding: 2px 10px 2px 10px;
color:#06415F;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#menu li:hover ul {
left: auto;
display: block;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}

10. Kalau sudah di paste, langkah terakhir adalah tekan SAVE template


Nahhh demikiaanlah  artikel Cara Membuat Navigasi Horisontal ini saya berikan yang semoga berguna untuk anda..