Menu Navigasi Horizontal

1
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 :


Cara Bikin Navigasi Blog horisontal


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..
Author Image

About Ahmad Habibullah
Soratemplates is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design