Membuat Navigasi Bawah Header Pada Blogspot/ Blogger.com

Link navigasi bawah header adalah suatu bagian dari blog yang menurut saya membuat blog tersebut tampak lebih profesional.
Oleh karena itu, saya mencari dan mencari tahu kesana kemari agar dapat membuat blog ini memiliki link navigasi yang letaknya di bawah header.
Setelah lama mencari tahu dan akhirnya dapat tahu, maka sekarang saya ingin membaginya tahu tersebut dengan siapa saja yang mau.

Berikut ini catatan mengenai cara membuat link navigasi bawah header pada blogger/ blogspot.

Demo disini

Langkah-langkah membuat navbar custom pada template blogger :

A. Langkah I

1. Log in ke akun blogger.

2. Setelah masuk ke akun blogger, kemudian klik menu "Rancangan" atau "Design"

3. Klik "Edit HTML" untuk masuk ke halaman pengeditan kode template.

4. Centang kotak kecil yang berada di sebelah kiri kalimat "Expand template widget" kemudian back up (copy paste) seluruh kode template di notepad. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan kode template.

5. Copy kode berikut ini :

#nav a, nav a:visited{
background: #660000;
color : #fff;
display :block;
margin :1px;
padding:0 3px 0 3px;
border : 1px solid;
font-size:11px;
font-family:Arial;
float:left;
font-weight:bold;
}

#nav a:hover{
background: #000000;
color : #fff;
display :block;
margin :1px;
padding:0 5px 0 5px;
border : 1px solid;
font-size:11px;
font-family:Arial;
float:left;
font-weight:bold;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
list-style : none;
}

6. Paste kode tersebut tepat dibawah kode berikut pada text area template:

]]></b:skin>

Langkah I selesai ! Sekarang lakukan langkah II berikut ini.

B. Langkah II

1. Letakkan kode berikut ini diatas kode <div id='content-wrapper'> :

<div id='nav'>
<ul>
<li><a href='#'>Home</a></li>

<li><a href='#'>Home</a></li>

<li><a href='#'>Home</a></li>

<li><a href='#'>Home</a></li>

<li><a href='#'>Home</a></li>

<li><a href='#'>Home</a></li>

<li><a href='#'>Home</a></li>
</ul>
</div>



2. Klik "Pratinjau" atau "Preview" untuk melihat hasilnya.

3. Klik "Simpan" atau "Save" setelah tampilannya sesuai dengan yang diinginkan.

Keterangan :
- Jika ingin mengganti warna background-nya, maka gantilah kode yang berwarna hijau di atas dengan kode warna yang diinginkan.
- Untuk mengubah warna teks-nya, ubahlah kode yang berwarna biru.
- Untuk menambah navigasi, tambahkan kode berikut sebelum kode </ul> :

<li><a href='#'>Home</a></li>

- Gantilah tanda pagar (#) dengan url yang ingin di link.
- Ganti kata "Home" dengan kata yang diinginkan.

Demikian tadi catatan sekilas tentang cara membuat navigasi custom untuk blogspot.
Semoga bermanfaat..