Membuat

1
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.

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 .

Artikel seputar membuat menu Navigasi:
Bikin Menu Navigasi Sederhana
Bikin Menu Navigasi plus sub menu (Menu Pulldown)

1 komentar:

==[B]ackdu[T]zZ== mengatakan...

gan gw kan pemula ni w mau nanya gmna sih share cheat ke blogg kita .........? tolong kasih tau ya

Posting Komentar