membuat navigasi bawah header pada blogger


Link navigasi bawah header adalah suatu bagian dari blog yang menurut saya membuat blog tersebut tampak lebih profesional.dan lebih mewah.
menurut saja hal ini penting untuk nilai tambah estetika blog anda,jika anda ingi memasang nya pada blog anda silahkan saja tetapi tidak ada salahnya lihat demonya dulu disini
jika anda merasa anda ingin blog anda memiliki navigasi seperti itu silahkan ikuti tutorial berikut

Berikut ini catatan mengenai cara membuat link navigasi bawah header pada blogger/ blogspot.
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..

1 komentar:

  1. belum ada komentar silahkan tambahkan komentar atau pertanyaan anda.

    BalasHapus

silahkan tinggalkan pesan !!!