Cara mudah untuk membuat tab menu navigasi horizontal sederhana
Ada beberapa member saya yang bertanya bagaimana cara membuat menu navigasi horizontal seperti yang ada di blog saya ini dan seperti menu horizontal yang seperti contoh di atas trikblog.co.cc ini.
Mungkin anda sudah sering melihat tutorial-tutorial bagaimana cara membuat menu horizontal di blog lain,sebenar nya tidak jauh berbeda,malah jauh lebih sederhana,tapi menurut saya lebih terlihat simple dan elegan.
Ok..langsung aja,cara pasang menu navigasi horizontal nya sangat mudah :
1.Anda masuk dulu ke situs CSS menu generator di CSSPORTAL.COM
2.Anda pilih menu yang anda suka,saya ambil contoh anda pilih menu yang pertama,lalu anda klik.
3.Lalu anda akan mendapatkan kode CSS nya :HTML CODE :
<div id="tabs31">
<ul>
<li><a href="#" title=""><span>Home</span></a></li>
<li><a href="#" title=""><span>About Us</span></a></li>
<li><a href="#" title="" class="current"><span>Services</span></a></li>
<li><a href="#" title=""><span>Our Work</span></a></li>
<li><a href="#" title=""><span>Contact Us</span></a></li>
</ul>
</div>
danCSS Code :
4.Nah sekarang kita tinggal pasang saja kode diatas.Caranya:
/* ^^^^^^^^ BELOW IS THE CODE FOR THE MENU ^^^^^^^^^^ */
#tabs31{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(images/bgOFF1.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;}
#tabs31 ul{margin:0;padding:0;list-style-type:none;width:auto;}
#tabs31 ul li{display:block;float:left;margin:0;}
#tabs31 ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(images/bgDIVIDER1.gif) no-repeat top right;}
#tabs31 ul li a:hover,#tabs31 ul li a.current{color:#B30000;background:#fff url(images/bgON1.gif) no-repeat top right;}
/* ^^^^^^^^ ABOVE IS THE CODE FOR THE MENU ^^^^^^^^^^ */
- Masuk ke TATA LETAK --> EDIT HTML (beri tanda centang pada kotak expand text widget)
- Letakkan seluruh kode pada HTML KODE di bawah kode :<div id='upper-wrapper'>
- Letakkan kode CSS diatas kode :
bla..bla..bla...
</div>]]></b:skin>
4.Selesai...
Anda juga harus mendownload source nya pada situs nya agar tampilan sesuai dengan yang ada pada gambar.Tapi kalau saya tidak,malas download dan upload nya.Jadi tidak apa-apa kalaupun ga di download.
Ganti kode warna merah dengan alamat blog anda,ganti tulisan warna hijau dengan nama link nya.
Selamat mencoba...
Kalau ada yang bingung,tanya aja melalui kolom komentar ya!
Terimakasih
Referensi produk bisnis online untuk anda:
1.Dapatkan buku panduan bisnis online DISINI
2.Program baru bisnis online,sistem sederhana,lihat DISINI
66 Yang sudah berkomentar:
sip mas...
pokoke keren.......
keren mas
mau coba ahh
makasih yaa
linknya saya copy ya.hhe
@cahyo,ilham: terimakasih untuk komentar nya ya :)
Saya pernah coba dr yg lain ga berhasil.Sy bingung cara posting dimenu navigasinya gmn?coz sy klik menunya ktnya halaman ini tdk ada.Nanti sy mo coba yg ini.Maaf maklum sy pemula.Trimakasih atas penjelasannya..
Artikel yg bagus nich buat dicoba.
Terimakasih infonya.
Kunjungi sekali2 ya blog saya http://www.tentang-komputer-internet.co.cc
minta pendapatnya hehe....
Terimakasih Bpk. Togu
Pak,saya dah ketemu dua kode diatas.
nah kode HTML sebelumnya kan sudah ada
dimana posisi kedua kode terbaru ditempatkan.
atau mungkin ada alamat templete tersebut. dimana saya bisa download.
Terimakasih sebelumnya.
cara buat post comentar gimana???
@krisna: maksudnya cara buat komentar terbaru?
Aku mau nanya kalo diblog aku ga ada ...='upper-wrapper'... aku taro kode HTML dimananya donk?
Mas, bagus sekali ulasannya.. lengkap. Terima kasih banyak..
@semua prosedur udah dujalanin, tapi cara ngisi postingan ke tab menu gmn? Thx sebelumnya...
@ade: ganti tulisan warna merah dengan alamat artikel yang ingin anda isi
wah ane ga nemu tuh mas...(div id=upper...)gimana nih solusinya sepertinya masalah ini udah di tanyain ma"Elin".
ane ga nemu apakah mungkin karena ane pake template dari yang udah jadi? atau gmn yaa?...
@blogger newbie: pasti ada kok,jangan lupa di beri tanda centang pada kotak expand text widget nya
Bos di HTML blog saya juga nggak
div id='upper-wrapper
sama kayak di blognya elin ...
mohon pencerahan ....
TRIMAKASIH
@Plasma: kok pada ga ada ya? udah di kasih tanda centang pada kotak expand text widget nya belum? Kalau sudah tetap tidak ada,berarti namanya aja yang beda.
thx..easy n simple!
Pak...salam ziarah...
Mau tanya la pak...
Sy tak bolej jumpa div id='upper-wrapper',
so saya tak boleh proceed. macam mana saya mau buat pak?
Sip....mampir balik dah om ^_^
Setelah saya liat dibeberapa tips trick membuat TAB VIEW ternyata punya bang Togu lah yg saya pilih karena menurut saya tampilan nya yg tampak lebih bagus.
Oleh karena itu saya ingin mengucapkan banyak terimakasih, karena TIPS & TRICK ini telah membuat BLOG sy tampil lebih indah
cuman masih ada satu ganjalan buat saya, yaitu:
TAB MENU Navigasi yg saya bikin belum sepenuhnya menyerupai yg saya inginkan seperti di http://www.cssportal.com/generators/menu.htm
coba di-cek di blog saya http://www.plasma-clothing.co.cc/
Warna tab menu tidak seperti yg aslinya ...
Tahapan apalagi yg harus sy lakukan biar tab nya makin bagus seperti contohnya ...
pada keterangan terakhir Bang Togu ada kata-kata
"Anda juga harus mendownload source nya pada situs nya agar tampilan sesuai dengan yang ada pada gambar."
Apakah tahapan ini yg belum sy lakukan ?
Cuman sy bingung yg harus didownload yg mana ..
Trus cara masukin ke blog sy-nya gimana ?
Mohon pencerahannya ....
sebelum dan sesudahnya saya ucapkan banyak TERIMAKASIH
kalo nggak ada
id='upper-wrapper
mungkin ada ini
div id='header-wrapper'
kalo sy sih paste aja dibawahnya coba-coba,
eh ternyata hasilnya bisa juga
jadinya seperti ini
http://www.plasma-clothing.co.cc/
Semoga bisa membantu
@gt: download nya di situs nya, lalu langsung aja kodenya di masukin ke blog.sudah otomatis gambar nya ada.
mas bagus ulasannya! bannernya dah aku pasang cpt pasang punya ku yaaaaa! thanks
http://freesoft-zen.blogspot.com
horas lae
ada sedikit masalah nih
saya gak ketemu code ini <div id='upper-wrapper'>
di template saya
mohon sarannya,
Thx
@Roy : setiap template memang mempunyai penamaan yang berbeda-beda, tergantung dari si pembuat template nya. Ada yg pakai nama Header wrapper, upper wrapper, navigation wrapper,dll
kalo nyimpen tab menunya d atas postingan itu digimanain ?? mklum ak msih newbie .. hehe
guanteng mas... thanks
gimana cara ngapusnya..kenapa jadi ancur blog ku..http://www.orankawam.co.cc
@Orank: ya tinggal di hapus aja kode yang tadi anda masukkan. Sebelum utak atik template, di back up dl template nya.
coba tolong anda cek blog saya ..itu bagaimana kok bisa kayak gitu..padahal sudah dihapus
@Orank: belom kehapus kode html nya, baru CSS nya aja
alhamdulillah,,,udah bisa,,thx
mas, trus kalo mau kita isi tampilan nya itu bagaimana??
misalnya nama tampilannya "tips", jadi ktika di klik tampilannya tips jg..
pas dengan yang lg aq butuhkan,trims infonya ..
mas yg tulisan banyk tu wat pa c? pa juga di copas gitu ditaruh di edit html di blog?mav msh newbie
makasih infonya... saya sudah coba tapi tidak menggunakan http://www.cssportal.com tapi meng edit html yang sdh ada di template blognya sendiri. tinggal ganti judul tab bawaan tamplate dengan judul sendiri.
yang pengen saya tanyakan gimana caranya membuat isi tab tersebut dengan isi postingan sendiri, bukan di link-kan ke situs lain. Ini blog saya http://anto-trd.blogspot.com/
Contoh: umpanyanya judul tab "about blacberry"
nah pas di klik tab tersebut langsung masuk ke postingan saya tentang blackberry
Makasih infonya
Hallo Bung, Link banner Udah ku pasang nichh, pasang balik yaaaa..... Makasih...
http://haddykaryana.blogspot.com
salam kenal,mas
mas kode diatas untuk wp /blogspot. dan apa sih perbedaan RSS dengan CSS.....Bila mas berkenan sy ingin membuat menu diatas dan dropdwon itu gimana caranya ya mas maaf sy orang yng masih buta soal blog mohon lewat mail ya mas widget dropdwonnya. mail sy pandanus.seed@yahoo.com
Salam kenal mas aku baru belajar nih..... itu menu untuk wp/blogspot mas.....mohon konvirmasinya
Mas aq dah coba buat menu navigasinya, tapi koq tab nya g aktif ya ? Maksudnya : tab nya muncul, lengkap, tapi waktu mau di klik tuh e g aktif...(biasanya kan waktu mau diklik timbul gbr tangan...inituh g yah ? ). Sal;ah dimana yah mas...? Tapi aq coba di blogspotku yang lain...bisa ( apa aq pake template standard yah ?) Mohon pencerahannya....trims
sobat,berguna banget nich infony, kunjungi blog saya jg y :)
ok mas...terima kasih banyak..
ok...tukeran link ya mas
udah kupasang link blognya
thx
Siip Kang kebetulan lagi nyari ini, mkasih tutorialnya Kang :D
terus kalo sudah di pasang menunya.. gimana cara ngisi dari setiap menu tadi mas??? contoh contact us bila di klik muncul menu baru gimana buatnya kk plissss
Kalo bikin submenunya (kaya listnya gitu) gimana mana mampir ke web aku y zord.ucoz.com
KK GIMANA BUAT ISI DARI SETIAP MENU NAVIGASI TADI.. CONTOH MENU PANDUAN BISNIS ONLINE JIKA DI KLIK NANTI MUNCUL LAMAN BARU TERUS ADA ISINYA GIMANA BUATNYA KK ....
ne mail aku tian_poinblank@yahoo.com
kasih tau ya kk master plissss
thanks yh mas
komikblaze.blogspot.com
lantas nulis sesuatu yang kita kehendaki itu gimana bang.... kalo kode menu saya udah paham.. namun kurang paham dengan artikel2 yang ingin diletakkan pada menu2 tsb.
mohon penjelasannya
punya saya ga ada kode
upper-wrappernya
gimana ya bro ?
iya nih ga ada upper-wrappernya
mantaf gan,tukeran link dong,,, link juragan da tak taruh dibligku bos,,, sukses selalu
sekedar jalan2 boss....n tukeran link boss....
Mas kode ccs'nya di simpen dimana??
Setiap template beda2 penamaan nya.. kalo saya cukup tekan ctrl+f terus cari <div id pasti ketemu
keren mas
sip,, thanks,,
kren ini yg w cri, langsung prakteklah,
sekali2 tengok blog aku ya
http://xp-w3.blogspot.com
makasih tutornya
upper-wrapper ga ada header-wrapper juga ga ada gimana ni mas, maklum new be
keren mas...
mas klo posting di blog trus publish otomatis sesuai ke menu2 blohg kita gmna caranya..?
maap jdy ngeroptin..
mas kok ga' ada yg upper-wrapper tolong pliz.,.,.,.,.,.,
mas... thx bgt ni share nya... tp pas saya coba kok tampilannya kebawah ya bukan kesamping... trus kok ga sama tampilannya kyk yg di cssportal yg saya pilih
Iya Mas Kok Gak Ada upper-wappernya tolong pencerahannya ya mas...
terimakasih banyak boss, saya juga lagi belajar neh!
keren tipsnya , bisa tak cobain nih mas :D
tips nya manteb mas,, tak cobain ya :D
Posting Komentar
Silahkan berkomentar,tapi jangan spam ya!