Cara Membuat Horizontal Navigasi Pada Blog

Pada postingan saya sebelumnya, saya menulis artikel tentang cara membuat related post dengan thumbnails, dan kali ini saya akan menulis artikel tentang cara membuat horizontal navigasi pada blog. Tapi sebelumnya saya mau menginformasikan kepada pembaca, jika anda membeli perangkat telekomunikasi, sebaiknya yang sudah di sertifikasi atau sudah mendapatkan setifikat resmi dari postel, untuk menjaga agar anda tidak berurusan dengan pihak yang berwajib. Dan perangkat yang sudah di sertifikasi, tentunya sudah teruji di Balai Besar Pengujian Perangkat Telekomunikasi sehingga mutu dan kualitas perangkat terjamin.

Kembali ke pokok pembahasan, untuk mengatur penampilan blog anda, bisa anda pasangkan Horizontal tab navigasi pada header.Dengan tab navigasi ini anda bisa meletakkan menu-menu yang mengarah kehalaman lain pada blog anda dan memudahkan para pembaca membuka halaman lain tersebut.


Tab navigasi ini akan ditempatkan pada bagian atas atas blog yaitu pada header.Seperti yang anda lihat pada blog ini, ada beberapa tap menu yang saya pasang seperti Tutorial Blog, Islam, dan Tukar Link.Menu yang dipasang tergantung pada keinginan anda.Cara membuatnya adalah sebagai berikut.

1. Login pada Blogger.
2. Klik Layout pada Dashboard anda.
3. Pada Layout klik Edit HTML .
4. Untuk menghindari hal-hal yang tidak dinginkan saat akan mengedit template HTML anda, lakukan backup terlebih dahulu dengan mengklik
5. Temukan kode </b:skin>
6. Letakkan kode dibawah ini sebelum kode </b:skin>

/* ----- LINKBAR ----- */
#bg_nav {
background: #000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333;
border-bottom: 1px solid #000;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 720px;
float: left;
margin: 0px;
padding: 0px;
}

#navright {
width: 220px;
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: #222;
color: #FFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 1px solid #000;
}

#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 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: #333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#nav li li a:hover, #nav li li a:active {
background: #666;
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;
}

Temukan kode di bawah ini

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

• Letakkan kode dibawah ini dibawah kode diatas pada (langkah 7)

<div id="'bg_nav'">
<div id="'navleft'">
<div id="'nav'">
<ul>
<li><a href='http://agustomo.blogspot.com
'>Home</a></li>
<li><a href="'http://agustomo.blogspot.com/search/label/Jasa%20Sertifikasi%20Blog'">Jasa Sertifikasi
Blog</a></li>
<li><a href="'http://agustomo.blogspot.com/search/label/Proses%20Type%20Approval'">Proses Type Approval</a></li>
<li><a href="'http://agustomo.blogspot.com/search?updated-min=2009-01-01T00%3A00%3A00-08%3A00&updated-max=2010-01-01T00%3A00%3A00-08%3A00&max-results=50">
Daftar Isi</a></li>
<li><a href="'http://agustomo.blogspot.com/2001/08/balai-besar-pengujian-perangkat.html">Balai Besar Pengujian Perangkat Telekomunikasi</a></li>
<li><a href="'http://agustomo.blogspot.com/2009/08/jurus-seo-menjelang-senja.html'">Jurus Seo Menjelang Senja</a></li>
</ul>
</div>
</div>
</div>

• Gantilah link yang berwarna merah dengan link dari blog anda.
• Selanjutnya Save.
  

Jreng....tab navigasi menu sudah muncul pada header anda.Untuk mengganti warna background agar sesuai dengan warna template blog anda, robahlah pada background: #000 .Ganti #000 dengan kode warna yang lain.Kode-kode warna HTML dapat anda lihat disini kode warna HTML.

Demikian informasi dari saya tentang cara membuat horizontal navigasi pada blog yang dapat saya sampaikan, semoga berguna dan dapat menambah pengetahuan anda.