Tetapi berhubung hasilnya amat sangat sederhana sekali tanpa embel-embel background warna dan border, plus permintaan dari beberapa rekan blogger yang dah komen di blog ini finally artikel ini selesai juga dibuat (PeEr-koe finish). So buat yang tertarik silahkan saja ikuti cara berikut:
Tahap pertama menambah kode CSS ditemplate blog, caranya:
1.Login ke account blog anda
2.di
control panel pilih blog yang akan di buat menu navigasinya kemudian
pilih edit template, sebelum mengubah kode template anda sebaiknya
backup dulu dengan mendownload template Anda.
3.Jangan lupa memberi tanda centang pada expand widget.
4.Kemudian cari kode berikut (tekan ctrl+F untuk cepatnya):
</b:skin>
5.Setelah menemukan kode diatas copypaste-kan kode dibawah ini tepat diatas kode</b:skin>, atau letakkan diantara tags <head> </head>.
.menubar{
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
.menubar ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
background: #FF6C00
border-top-width: 1;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #808080
border-right-color: #808080;
border-bottom-color: #808080;
border-left-color: #808080
}
.menubar ul li{
display: inline;
}
.menubar ul li a{
float: left;
color: #FFFFFF;
padding: 5px 11px;
text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #C0C0C0
}
.menubar ul li a:visited{
color: #FFFFFF;
}
.menubar ul li a:hover, .menunav ul li .selected{
color: #FFFFFF !important;
padding-top: 5px;
padding-bottom: 5px;
background: #454545;
}
Ganti kode berwarna merah dengan kode warna yang sesuai dengan warna pada template anda agar terkesan menyatu dengan header anda, dan ganti ukuran border (kode berwarna hijau) sesuai keinginan anda. Jangan lupa untuk menyimpan hasil perubahan tersebut diatas
Tahap kedua, Menambah Widget Untuk Menu Navigasi.
1. masuk di Tata Letak kemudian pilih EDIT HTML jangan lupa expand widget dengan memberi tanda centang, dan letakkan kode dibawah ini diantara tags <body> </body> .
2.Dan masukkan kode berikut tepat dibawah kode html header:
<div class="menubar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="URL-1">Link-1</a></li>
<li><a href="URL-2">Link-2</a></li>
<li><a href="URL-3">Link-3</a></li>
</ul>
</div>
URL-1 sampai URL-3 diperolehdari url berdasarkan URLlabel seperti contoh dibawah ini:
/search/label/NamaLabel
kode warna merah ganti dengan nama label/kategori/tags sesuai blog anda.
3. Jangan lupa di save perubahan tersebut, untuk melihat hasilnya klik pratinjau.
4. Selamat..!! sekarang blog anda sudah punya menu navigasi.
jika ada pertanyaan just komen :D
Tidak ada komentar:
Posting Komentar