Membuat Horizontal Navigasi Blogger

Pada umumnya hampir semua yang punya situsweb maupun blog sudah tahu apa itu menu navigasi horizontal dan fitur ini adalah salah satu yang paling digemari banyak blogger mania. Menu navigasi horizontal untuk blog biasanya diletakkan pada bagian atas di header blog. Navigasi ini nantinya akan diisi dengan link-link yang mengarah pada halaman dituju. Selain itu harus disiapkan juga kata kunci yang akan dipakai pada link tersebut. Misalnya, saat ini saya membuat keyword "Home, GuestBook, BlogRoll, Free Download, Amazon" yang mengarah pada halaman yang sudah saya persiapkan dan tentunya sudah dipublish atau diterbitkan. Berbeda dengan wordpress yang bisa membuat halaman statis seperti menu about me atau tentang saya dimana halaman tersebut tidak termasuk dalam halaman posting. Kalau di blogger, halaman tersebut harus sudah diposting dan publish duru baru bisa kita mendapatkan link-nya. Nah, link ini bukan hanya link yang mengarah pada satu halaman posting saja, namun bisa link di luar blog dan bisa link menuju situs lain bahkan bisa berupa link yang menuju kategori posting atau label posting anda.


Lalu bagimana cara untuk mengetahui link tersebut? Mudah koq, anda tinggal klik halaman atau salah satu categories pada blog ini. Lalu perhatikan pada address bar, nah itulah sebaris link pada halaman yang anda klik tadi. Saya berikan beberapa contoh link lagi seperti di bawah ini.
Untuk link yang mengarah pada satu halaman pada blog saya misalnya seperti ini :

http://bangdel.blogspot.com/2009/09/google-tidak-menggunakan-meta-tag.html
http://bangdel.blogspot.com/2009/06/tentang-saya-dan-blog-bang-del.html

Untuk link yang mengarah pada label posting misalnya seperti ini :

http://bangdel.blogspot.com/search/label/Trik%20Blogspot
http://bangdel.blogspot.com/search/label/Blogging%20Tips

Untuk link yang mengarah pada situsweb lain misalnya seperti ini :

http://bangdel.blogspot.com
http://www.zersdownload.com

Sekarang anda telah menyiapkan link dan keyword yang akan ditambahkan pada menu horizontal navigasi. Jika ada yang kurang jelas bisa ditanyakan lagi. Oke langsung saja ke bagian utamanya.

Membuat horizontal navigasi blogger

1. Login ke blogger dengan ID anda
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Cari 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. Cari kode berikut :

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

   Jika sudah dapat, copy dan paste kode ini tepat di bawah kode tadi

   <div id='bg_nav'>
   <div id='navleft'>
   <div id='nav'>
   <ul>
   <li><a href='http://bangdel.blogspot.com'>Home</a></li>
   <li><a href='http://bangdel.blogspot.com/2009/06/tentang-saya-dan-blog-bang-del.html'>GuestBook</a></li>
   <li><a href='http://bangdel.blogspot.com/2009/06/link-kamu-ada-di-sini.html'>BlogRoll</a></li>
   <li><a href='http://www.zersdownload.com'>FreeDownload</a></li>
   <li><a href='http://astore.amazon.com/cheaplaptopcomputer-20'>Amazon</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='Cari'/> </form>
   </div>
   </div><!-- akhir bg_nav --></span>

7. Klik tombol SIMPAN TEMPLATE.
8. Selesai.

Nah, anda dapat menyesuaikan bagian yang sudah saya beri warna merah dan hijau dengan template dan link serta keyword anda. Seperti ukuran lebar template dan lain sebagainya tolong disesuaikan. Anda juga dapat berkreasi dengan kode warna pada script di atas. Silahkan diganti agar sesuai dengan blog anda. Secara lengkap Kang Rohman telah menulis tutorial membuat horizontal navigasi dan model lainnya dari menu ini. Saya banyak belajar dari blog beliau.

Perlu diketahui, setiap blog memiliki karakter dan desain template yang berbeda sehingga ada kemungkinan tutorial ini berbeda pula dengan template anda. Nah, saat ini saya menggunakan template dasar Minima White yang sudah di-kustomisasi. Disarankan untuk menggunakan blog percobaan sebagai bahan praktek anda. Oke, selamat mencoba dan selamat berkreasi dengan menu horizontal blogger.

Related Post:

Trik Blogspot

• Menambahkan Image Pada Judul Posting
• Mengganti Pager Link Blogger Dengan Icon
• Klik Label Tampil Hanya Judul Posting Update
• Klik Label Tampil Hanya Judul Posting
• Menambahkan Icon Pada Label Dan Link Sidebar
• Mengganti Tanggal Dengan Icon Kalender
• Menghilangkan Icon QuickEdit (Tang dan Obeng)
• Area Sidebar Dalam Kotak Terpisah
• Area Komentar Dalam Kotak Terpisah
• Area Posting Dalam Kotak Terpisah
• Background Warna Pada Teks Posting
• Modifikasi Pesan Pengantar Formulir Komentar
• Beda Tampilan Komentar Pemilik Blog
• Nomor Urut Komentar (Numbering Comment) Blogger
• Pasang Emoticon Di Atas Kotak Komentar
• Membuat Blockquote Dan Modifikasi Blockquote
• Masalah Pada Verifikasi Kotak Komentar
• Membuat Teks Berkedip Blink Text
• Avatar Profil Komentar Blogger Update
• Latar Belakang Teks Dengan Efek Stabilo
• Menggunakan Gambar Untuk Latar Belakang Blog
• Pasang Strip-Ad Seperti Navbar Blogger
• Menghilangkan Border Pada Image Posting
• Modifikasi Border Photo Profil Blogger

or or