Pada umumnya hampir semua yang punya situs web 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 bagaimana 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.htmlUntuk link yang mengarah pada label posting misalnya seperti ini :
http://bangdel.blogspot.com/2009/06/tentang-saya-dan-blog-bang-del.html
http://bangdel.blogspot.com/search/label/Trik%20BlogspotUntuk link yang mengarah pada situsweb lain misalnya seperti ini :
http://bangdel.blogspot.com/search/label/Blogging%20Tips
http://bangdel.blogspot.comSekarang 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.
http://www.zersdownload.com
Membuat horizontal navigasi blogger
- Login ke blogger dengan ID anda
- Klik Tata Letak.
- Klik tab Edit HTML.
- Cari kode ]]></b:skin>
- 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;
} - Cari kode berikut :
<div id='header-wrapper'>
Jika sudah dapat, copy dan paste kode ini tepat di bawah kode tadi
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div><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></blockquote> - Klik tombol SIMPAN TEMPLATE.
- Selesai.
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.
Tidak ada komentar:
Posting Komentar
Terima kasih. BY Mixland Blog.