mau dapat artikel terbaru blog ini? silahkan ikuti update blog ini

Ads

Bikin Sendiri Menu Navigasi Untuk Blogspot-part 2

Sebenarnya cara paling sederhana membuat menu navigasidengan memanfaatkan kode HTML sederhana pada widget tanpa perlu mengedit kode template pada sudah pernah saya posting disini.
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.

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)
FAQ Bikin Menu Navigasi (artikel ini)

38 komentar:

Anonim mengatakan...

bagus juga cara lo coy
bagi dong lewat email inodi
ruslanharuna@gmail.com

Oentoe_09 mengatakan...

bagi apanya ini cez?
kita daftar lewat email-tami saja di feedburner, kebetulan sa lagi buat artikel proseskoe bikin template blog ini..mudah2an bisa menambah referensi.

Radio Raudhah FM Kendari mengatakan...

hello kak safaat..???z ichal
wah udah lama ga men di blognya kak faat...
keren skali...z kayaknya harus banyak belajar dari kt neh..

Oentoe_09 mengatakan...

pa kabare bro??
bolehjie..ko tahuji to dimana mesti ketemu?
btw kabare bkn blogmu bgmn? sudah ada? alamatnya doeloe OK???

new season mengatakan...

halo mas salam, aku nunpang baca nih lagi belajar

Oentoe_09 mengatakan...

monggo silahkan di nikmati..moga2 moga bermanfaat :)

kang vier mengatakan...

kok g isa mas'

napa yak??????
mohon pencerahannya..........

Oentoe_09 mengatakan...

@ Meong:
kira-kira gak bisanya dimana ya?
soalnya tutorial ini di uji langsung di blog ini...
mungkin ada yang kurang kali

Ikni_Smanda mengatakan...

mas, kalo udah punya menu navigasinya

cara posting tulisan ke menu tersebut gimana ya???

please, bantuannya ...

iknismanda@yahoo.co.id

Ikni_Smanda mengatakan...

cara posting ke masing-masing menu barnya gimana mas, bingung banget nieh...

mohon bantuannya...

Mamim-nya Nadnad mengatakan...

Makasi ya pencerahanya.. sekalian tanya ya, kok pas di klik menu bar nya ga nge link ke postingan kita ya? bacaannya "Maaf, laman yang sedang Anda cari dalam blog very bery mommy tidak ada." label udah dibuat tp ga bisa ngelinknya. tolong yaaa...
thanks berat

Kak Seno mengatakan...

mas kok tidak ada gambar contoh penempatan kode. tolong dikasih dong mas biar tidak bingung..!

a g u n g mengatakan...

mantab, postingannya ku terusin ya:)

Oentoe_09 mengatakan...

@ Ikni Smada & Maminya Nadnad:
silahkan baca kembali artikel diatas ya dah dijelasin kok :D

@ Agung :
monggo mas.. asal tidak lupa mencantumkan sumber artikel aja ya ;)

Anonim mengatakan...

bleh ty kn mz.he2.
Kan qt dah buat menu y..trus cara posting tulisan sesuai menu tsb gmn???misal menu pendidikan,trus qt pengen bsa posting tulisan dgn tema pndidikn..mhon bantuanny..^_^

tri mengatakan...

boss... mau tanya dong, kalau biar menu navigasi-nya punya Sub menu navigasi, gimana caranya ya?
jadi, seandainya kalau menu navigasi "download" (misalnya), langsung muncul sub menu navigasi "download music". "dwonload film", dll di bawahnya dan bisa dipilih.

Oentoe_09 mengatakan...

@ Tri
first don't call me "boss" ok..
thanks sudah mampir ke blog ini.
untuk PR ini sabar ya saya cari jawabannya dulu OK
BR,
Oentoe_09

zilal mengatakan...

iya mas oentoe99... saya juga blum bisa posting ke masing2 menu pesanny "Tidak ada posting yang sesuai dengan query Anda"/"laman tidak ditemukan"
saya masih pemula bangat jadi masih meraba2, thx sebelumnya

zilal mengatakan...

ya ni mas, saya juga ga bisa posting padahal menunya udah ada, kasusnya sama dengan @ikni smada dan @maminya nadnad. saya juga udah pelajari tulisan di atas tp juga ga ketemu gimana caranya. terima kasih sebelumnya

Oentoe_09 mengatakan...

@ Zilal dkk yang punya masalah sejenis:
terang aja gak bisa karena artikelnya tidak di kasih label yang sama dengan link yang dipasang menu bar... jadi intinya link yang terpasang tidak lain tidak bukan adalah nama LABEL yang di bubuhkan saat memposting artikel di blog.. so gampangkan ????

Oentoe_09 mengatakan...

Eh lupa saya dah nulis FAQ mengenai artikel yang satu ini, monggo silahkan di baca kali-kali aja bisa membantu ;) linknya yanini ya :
http://oentoe09.blogspot.com/2009/09/faq-bikin-menu-bar-di-blogspot.html

ganool mengatakan...

bukan ini yang aku cari..

ganool mengatakan...

susah juga ternyata...

adsnewsplus mengatakan...

Hai bro, newbie nih soal html, apalagi liat susunannya.. hehehe.. bantuin dong buatin menu bar di siteku http://adsnewsplus.blogspot.com kangen nih sama menu bar.

Thanks!

valiant mengatakan...

btw kode warna buat warna biru tua & biru muda gimana ya?. ada saran ga buat blogs sederhanaku di
http://jumper99.blogspot.com
http://era90.blogspot.com
thanks bro.. maaf juga ngrepotin :)

Oentoe_09 mengatakan...

@ Ganol: Sorry klo begitu Friends... namanya juga ngedit kadang susah kadang sukses, kadang berhasil kadang tidak... tapi trik ini sudah di uji di blog ini juga kok... :)
@ Adsnewsplus: ikuti cara ini juga bisa...
@Valiant: untuk pewarnaan kode-kodenya bisa pake tools yang sy sudah bahas disini html color picker dijamin langsung dapat warna kodenya ;)

Deden Blog mengatakan...

wuuuaahhh...keren neh..ada tambahan menu buat blog ane..xixiii..ane nyoba GAN.btw maen2 yups ke blog ane di : http://www.cepotweb.co.cc

weNETelu mengatakan...

ntar coba_coba gan....

Deaness mengatakan...

keren dech.... saatnya mencoba.... :D

Afi Qurrahman mengatakan...

waduhh... ga bisa bro.. jadi acak adul -_-"

Together & Forever mengatakan...

kok gak bisa ya gan??????apa aku yg salah masukinnya ya.....aku mo nanya gan,cocok kode warna apa ya buat blog aku ( http://dampoawang-news.blogspot.com/ )mohon pencerahannya ya gan......aku baru pemula nich gan....matur nuwun sanget

Oentoe_09 mengatakan...

@ Inspirasi:
alamat setiap tab di blognya harus menggunakan alamat LABEL misal untuk label bernama TIPS misalnya, seharusnya http://dampoawang-news.blogspot.com/search/label/Tips bukannya http://dampoawang-news.blogspot.com/p/tips.html

Arthoen aprianto mengatakan...

tahap kedua edit html'a ko ga ketemu yah letaknya dimana??/mohon bantuanya,,,, thanks banget

SALFHACE mengatakan...

mas biar bisa ganti posisi dibawah judul blog gimana ya?

032NN mengatakan...

alamat label itu maksdnya ap gan ? msh bingung nih,, ada cara pengaturan label nya di setting blog nya ga ? help meee :D

seftiholic mengatakan...

sangat membantu, terimakasih

Danang Setyawan mengatakan...

kalo membuat blok" menurut katagori gimana..?

Unknown mengatakan...

iya gan masih bingung, menghubungkan halaman ke menu navigasinya gimana ?? kalo boleh minta pake video tutorial secara lengkap.. hhee

Posting Komentar

Label

Entri Populer

Blog support