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 anda2.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 plus sub menu (Menu Pulldown)
FAQ Bikin Menu Navigasi (artikel ini)
38 komentar:
bagus juga cara lo coy
bagi dong lewat email inodi
ruslanharuna@gmail.com
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.
hello kak safaat..???z ichal
wah udah lama ga men di blognya kak faat...
keren skali...z kayaknya harus banyak belajar dari kt neh..
pa kabare bro??
bolehjie..ko tahuji to dimana mesti ketemu?
btw kabare bkn blogmu bgmn? sudah ada? alamatnya doeloe OK???
halo mas salam, aku nunpang baca nih lagi belajar
monggo silahkan di nikmati..moga2 moga bermanfaat :)
kok g isa mas'
napa yak??????
mohon pencerahannya..........
@ Meong:
kira-kira gak bisanya dimana ya?
soalnya tutorial ini di uji langsung di blog ini...
mungkin ada yang kurang kali
mas, kalo udah punya menu navigasinya
cara posting tulisan ke menu tersebut gimana ya???
please, bantuannya ...
iknismanda@yahoo.co.id
cara posting ke masing-masing menu barnya gimana mas, bingung banget nieh...
mohon bantuannya...
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
mas kok tidak ada gambar contoh penempatan kode. tolong dikasih dong mas biar tidak bingung..!
mantab, postingannya ku terusin ya:)
@ 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 ;)
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..^_^
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.
@ 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
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
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
@ 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 ????
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
bukan ini yang aku cari..
susah juga ternyata...
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!
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 :)
@ 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 ;)
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
ntar coba_coba gan....
keren dech.... saatnya mencoba.... :D
waduhh... ga bisa bro.. jadi acak adul -_-"
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
@ 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
tahap kedua edit html'a ko ga ketemu yah letaknya dimana??/mohon bantuanya,,,, thanks banget
mas biar bisa ganti posisi dibawah judul blog gimana ya?
alamat label itu maksdnya ap gan ? msh bingung nih,, ada cara pengaturan label nya di setting blog nya ga ? help meee :D
sangat membantu, terimakasih
kalo membuat blok" menurut katagori gimana..?
iya gan masih bingung, menghubungkan halaman ke menu navigasinya gimana ?? kalo boleh minta pake video tutorial secara lengkap.. hhee
Posting Komentar