Cara Lain Membuat Horizontal Navigasi

Pada postingan sebelumnya, Rully juga pernah mengulas pembuatan Menu Horizontal. Pada postingan kali ini, akan Rully bahas cara lain.

Sebelum Anda membuat tombol navigasi, ada beberapa hal yang perlu Anda persiapkan, antara lain adalah Anda perlu menyiapkan keyword apa yang akan di pasang pada tombol-tombol tersebut. Persiapan yang lainnya adalah link-link yang akan Anda pasang. Link yang di pakai bisa berupa link ke alamat blog atau web lain, link ke postingan blog lain atau bisa juga berupa link ke dalam posting blog Anda sendiri. Sebagai contoh, bila Anda mempunyai beberapa blog maka Anda menginginkan agar tombol navigasi Anda di isi dengan link blog tersebut, misalkan alamat blog-blog tersebut adalah sebagai berikut :


http://denithul.blogspot.com
http://denithul-downloadmp3.blogspot.com
http://belajartrikblog.blogspot.com

Bagaimana jika link yang di inginkan adalah masih dalam blog sendiri bukan nge link ke blog lain? Ini tentu saja bisa. Namun ada satu kekurangan blogger di bandingkan dengan wordpress yaitu blogger tidak bisa membuat halaman statis. Apa yang di maksud dengan halaman statis? Halaman statis yang di maksud di sini adalah halaman yang tidak masuk ke dalam deretan halaman posting, contoh yaitu halaman about me atau tentang Saya jika di wordpress. Nah, blogger tidak bisa seperti itu, jika Anda menginginkan suatu halaman bisa di link, maka anda harus mempostingnya. Jadi silahkan posting halaman yang Anda inginkan untuk di link. Bagaimana cara mengetahui alamat link suatu postingan? Caranya adalah Anda harus klik judul halaman tersebut atau klik menu Read more atau baca Selengkapnya jika Anda sudah memakai sistem read more, kemudian lihat ke address bar browser Anda, itulah alamat link postingan Anda, copy lalu paste pada notepad agar gampang untuk di gunakan. contoh alamat posting :
http://kolom-tutorial.blogspot.com/2008/11/ikutan-kontes-menulis-kliksayacom-yuk.html
http://kolom-tutorial.blogspot.com/2008/11/solusi-mengatasi-kotak-komentar-yang.html
Selain link posting Anda juga bisa memasang link untuk label atau kategori, fungsi ini sangat berguna bagi Anda yang menginginkan ketika suatu tombol navigasi diklik, maka yang terbuka adalah semua posting yang termasuk kedalam kategori tersebut. Contoh, apabila pengunjung klik tombol navigasi akan terbuka semua posting yang berkategori tutorial tutorial blog :
http://belajartrikblog.blogspot.com/search/label/tutorial%20blog
Langkah selanjutnya adalah menambahkan kode navigasi ke template Anda.
Perlu di ingat sekali lagi bahwa desain template antara yang satu dengan yang lain sangatlah berbeda, sehingga sangat besar kemungkinan apa yang saya terangkan berbeda dengan template yang anda gunakan. Untuk itu Rully menyarankan agar Anda memback up template Anda terlebih dahulu. Ini untuk menghindari hal-hal yang tidak diinginkan.

Oke, kita mulai aja pembahasannya :

1. Silahkan login ke blogger dengan ID Anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML
4. Cari Kode kode ]]></b:skin>
5. Copy paste kode berikut persis di atas kode ]]></b:skin>
   
   

   /* navbar
   ================== */
   #bg_nav {
   background: #000000;
   width: 660px;
   height: 29px;
   font-size: 11px;
   font-family: Arial, Tahoma, Verdana;
   color: #FFFFFF;
   font-weight: bold;
   margin: 0px auto 0px;
   padding: 0px;
   border-top: 1px solid #333333;
   border-bottom: 1px solid #333333;
   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 3px;
   }
   #navleft {
   width: 440px;
   float: left;
   margin: 0px;
   padding: 0px;
   }
   #navright {
   width: 200px;
   font-size: 11px;
   float: right;
   margin: 0px;
   padding: 6px 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: #222222;
   color: #FFFFFF;
   display: block;
   font-weight: bold;
   margin: 0px;
   padding: 8px 15px 8px 15px;
   border-left: 1px solid #000000
   }
   #nav a:hover {
   background: #6e6d6d;
   color: #FFFFFF;
   margin: 0px;
   padding: 8px 15px 8px 15px;
   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: #333333;
   width: 160px;
   float: none;
   margin: 0px;
   padding: 7px 30px 7px 10px;
   border-bottom: 1px solid #000000;
   border-left: 1px solid #000000;
   border-right: 1px solid #000000;
   }
   #nav li li a:hover, #nav li li a:active {
   background: #666666;
   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;
   }

   
   
   
6. Tuju bagian bawah, lalu cari seperti berikut ini
   
   

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

   
   
   
7. Copy paste code berikut persis di bawah kode yang tadi :
   
   

   <div id='bg_nav'>
   <div id='navleft'>
   <div id='nav'>
   <ul>
   <li><a href='http://belajartikblog.blogspot.com/'>Home</a></li>
   <li><a href='http://denithul.blogspot.com/'>Artikel</a></li>
   <li><a href='http://denithul-downloadmp3.blogspot.com/'>Download Mp3</a></li>
   
   </ul>
   </div>
   </div>
   <div id='navright'>
   <form action='http://AlamatBlogAnda.blogspot.com/search' id='searchform' method='get' name='searchform'>
   <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>
   </div>
   </div><!-- akhir bg_nav -->

   
   
   
8. Klik tombol SIMPAN TEMPLATE.
9. Selesai.
   
   

Ada beberapa yang perlu di sesuaikan. Beberapa di antaranya yaitu lebar dari navigasi, link, keyword yang di inginkan serta yang lainnya.

Beberapa contoh di antaranya :

/* navbar
================== */
#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}

Anda harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template Anda. misal : width:990px.

#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}

Yang inipun sama, Anda harus mengubahnya sesuai dengan nilai yang pas untuk template Anda.

<li><a href='http://denithul.blogspot.com/'>Artikel</a></li>
<li><a href='http://denithul-downloadmp3.blogspot.com/'>Download Mp3</a></li>
<li><a href='http://belajartrikblog.blogspot.com/'>Tutorial Blog</a></li>

Anda harus mengubah link yang ada dengan link yang Anda inginkan. Untuk keywordnya pun anda bisa ganti sesuai dengan keinginan.

Selamat mencoba!

[*]

Artikel Menarik Lainnya