Kita bisa membuatmenu navigasi dengan 2 cara, yang pertama yaitu dengan memanfaatkan kode html pada widget tanpa mengedit kode template. tetapi hasilnya akan sangat sederhana tanpa bisa merubah background warna dan border.
Kita akan menggunakan cara yang kedua yang bisa membuat menu navigasi menjadi lebih cool...
Pertama-tama tambahkan kode CSS ditemplate blog.
1.Login ke account blog anda
2.di control panel pilih tata letak, kemudian pilih edit html, sebelum mengubah kode template anda, sebaiknya backup dulu dengan mendownload template Anda.
3.Jangan lupa memberi tanda centang pada expand template 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 biru dengan kode warna yang sesuai dengan warna pada template anda agar terkesan menyatu dengan header anda, dan ganti ukuran border (kode berwarna merah) 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.
Jangan lupa di save perubahan tersebut, untuk melihat hasilnya klik pratinjau.
Selamat..!!!blog anda sekarang sudah punyamenu navigasi.
Semoga bermanfaat dan selamat berblogging ria.
NB: jika ada pertanyaan saran dan kritik mohon di berutahukan ke yang punya kerjaan ini biar makin bisa nulis yang bermanfaat .
Komentar :
Post a Comment