membuat menu horizontal pada blog

Pada entri yang lepas saya ada membuat tutorial bagaimana hendak membuat menu bar tanpa hack template .tutorial kali ini masih lagi mengenai bagaimana hendak membuat menu horizontal pada blog.Untuk membuat tidak perlu kita hack template,cuma  masukkan kod pada add gadget.Tutorial ini adalah atas permintaan  oleh sahabat kita Sendra yang mahu saya membuat tutorial bagaimana hendak membuat horizontal navigation seperti yang terdapat bahagian bawah header blog ini..yang tertera perkataan HOME,ISI KANDUNGAN......untuk membuatnya ikuti langkah ini.

Untuk memasukkan horizontal menu ini anda perlu:
1.log in ke blogger,pilih design-->>page element
2.klik pada add gadget--->>pilih HTML/Javascript
3.kemudian pastekan  kod menu horizontal pilihan anda dibawah ini
4.selepas save kod ,seret widget HTML/Javascript ke bawah header




<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 10px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color:#fff ; background-color: #F781BE; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>t;


<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>





<style> #navcontainer { background: #E3CEF6; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #F5A9D0 #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #A9A9F5; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #800000; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #F5A9D0 #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>




<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#F7BE81; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>


Untuk memasukkan link anda perlu mengedit bahagian ini pada kod diatas:
  <li><a href="#" ><span>Link 1</span></a></li>
  <li><a href="#" ><span>Link 2</span></a></li>
  <li><a href="#" ><span>Link 3</span></a></li>
  <li><a href="#" ><span>Link 4</span></a></li>

  Pada tanda "#" masukkan link anda
  Manakala pada Link 1,Link2,Link3 dan Link 4 pula masukkan perkataan yang ingin dipaparkan contoh
  HOME,CONTACT dan sebagainya.
  Jika hendak delete atau tambah link, padam atau tambah kod ini:

 <li><a href="#" ><span>Link n</span></a></li>
 * Warna warna pada menu boleh ditukar dengan mengubah kod warna pada kod kod menu diatas.

Catat Ulasan

61 Comments:

Sekapur Sireh berkata...
terima kasih atas kunjungan

boleh x kalau saya nak letak menu bar nih kat bahagian tgh2...?? sbb skrng ni menu bar sy kt bhgian kiri... trima kasih...

yahaya berkata...
terima kasih atas kunjungan

@Sekapur SirehBoleh letak kiri atau kanan saja

izee berkata...
terima kasih atas kunjungan

saya nak tanya,saya dah wat tuto ni..tapi bagaimana kalau saya nak create new post pda salah satu link saya ni so saya kena copy paste link baru tu ke pada "#" ? saya xfhm sgt.

harap dapat membantu.

yahaya berkata...
terima kasih atas kunjungan

pada tanda "#" masukkan link yg dikehendakki

Haziq Zainal berkata...
terima kasih atas kunjungan

tolong! dah ikut tuto ni kat bawah header tapi tak center. senget ke kiri. so macam mana? dan kalau kita nak design sendiri button link ni leh kan? macam mana nak insert gambar yang kita dah design ni? harap dapat membantu ;)

Blog Guru PI Panglima berkata...
terima kasih atas kunjungan

salam.Tuan, saya sdg cuba buat blog.Tp saya x faham apa yang nak di letak pada " # ". Maksud link tu macam mana? perlukah saya buat satu page lain dan buat macam hyperlink ke page tersebut? Tolong buat satu contoh lebih jelas boleh tak? terima kasih.

Blog Guru PI Panglima berkata...
terima kasih atas kunjungan

Bila saya klik pada menu tu, contoh "home" dia masih papar page yg sama. Pasaipa dia tak bertukar ke page lain?

yahaya berkata...
terima kasih atas kunjungan

@Blog Guru PI Panglimaletak url cth mcm ni:

http://teknikbuatblog.blogspot.com

yahaya berkata...
terima kasih atas kunjungan

@Blog Guru PI Panglimakena letak link yg berlainan..mungkin link letak sama

geekz36 berkata...
terima kasih atas kunjungan

jika ingin link kepada widget seperti "Mister Linky's Magical Widgets" dll bagaimana?

yahaya berkata...
terima kasih atas kunjungan

@geekz36bila dah siap buat page statik,buka semula untuk dapatkan link pada adress bar copy dan gantikan pada kod cth diatas Link1.

geekz36 berkata...
terima kasih atas kunjungan

alright, tq for the respond

Muhd Shamil berkata...
terima kasih atas kunjungan

nk tanye..nk wat name blog tu bergerak camne erk ? yg kat atas skali tu...

yahaya berkata...
terima kasih atas kunjungan

@Muhd Shamilrujuk pada artikel teks bergerak pada title bar

FAMIRAH AMIRAH berkata...
terima kasih atas kunjungan

salam...abg yahya, sy nk tanye camne carenya abg letak icon "Y" tu kat navigation toolbar sebelah link tu???

yahaya berkata...
terima kasih atas kunjungan

@FAMIRAH AMIRAHcuba semak pada tutorial cara letak favicon pada url

Riduan berkata...
terima kasih atas kunjungan

Nice info...thanks

Queen ANNE berkata...
terima kasih atas kunjungan

mcm mane nak centre kan horizontal menu tu ?

Tanpa Nama berkata...
terima kasih atas kunjungan

@yahaya page statik tu mcm mana? sy dah create url kat # ni tapi still buka page yg sama...mcm mana nak create url tuk menu2 bar yg sy wat..

Tanpa Nama berkata...
terima kasih atas kunjungan

@yahaya page statik tu mcm mana? sy dah create url kat # ni tapi still buka page yg sama...mcm mana nak create url tuk menu2 bar yg sy wat..

Nurshahirah bte Sapian berkata...
terima kasih atas kunjungan

laa, nape tak boleh seret ke bawah header pun?

yahaya berkata...
terima kasih atas kunjungan

@Nurshahirah bte Sapian pada template cari kod ini:
maxwidgets='5' showaddelement='yes'

tukar nilai seperti diatas

cik chenta berkata...
terima kasih atas kunjungan

masukkan link anda tu link yg mane ek ? tq

eB ezrin berkata...
terima kasih atas kunjungan

x faham la, yang dekat tanda
"#" tuh... camner nk tgk code link?

yahaya berkata...
terima kasih atas kunjungan

@eB ezrin
kod link boleh kita lihat ruangan url pada sesuatu browser,cuba rujuk tutorial yg lain..
Membuat halaman statik pada blog

endi berkata...
terima kasih atas kunjungan

terimakasuh kawan atas info dan bantuannya

Fadillah berkata...
terima kasih atas kunjungan

mau lihat yang lebih sederhana visit my blog

Fadillah berkata...
terima kasih atas kunjungan

visit my blo ada yang lbh sederhana

Akky berkata...
terima kasih atas kunjungan

salam,. thanksatas infonya...!!!

Cikgu Yani berkata...
terima kasih atas kunjungan

terima kasih tunjuk ajar

yahaya berkata...
terima kasih atas kunjungan

@Cikgu Yaniterima kasih juga singgah sini...:)

food4life berkata...
terima kasih atas kunjungan

thank for the sharing tip,it's nice

Lutfie Tutorial Blog berkata...
terima kasih atas kunjungan

mantap gan tutorial nya

vat_you berkata...
terima kasih atas kunjungan

permisi,, saya mau nanya, saya udah coba tapi kok kalau di preview gak bisa ya, selalu eror.. mohon balesan nya y.. thank

yahaya berkata...
terima kasih atas kunjungan

@vat_youkod diatas sudah saya cuba satu persatu tiada yg error mungkin masa cuba masukkan link ada errornya

happy go lucky!! berkata...
terima kasih atas kunjungan

t.q for the information.. (",)

decloset berkata...
terima kasih atas kunjungan

terima kasih krn blog ni sgt membantu bg amatur mcm kami ni..da boleh buat menu horizontal.klau boleh,nk lbih bnyk pilihan utk cantikkan lg blog kami..tq ;)

UBK SK Sg.Batu berkata...
terima kasih atas kunjungan

Home saya tak ilink,caranya bagaimana

yahaya berkata...
terima kasih atas kunjungan

@UBK SK Sg.Batu
ubah kod diatas:

<li><a href="#" ><span>Link 1</span></a></li>
dan letak seperi ini:

<li><a href="http://namablogsaya.blogspot.com" ><span>HOME</span></a></li>

Cikgu Azhar berkata...
terima kasih atas kunjungan

@yahaya
sy dh cuba-berjaya! Semoga Allah membalas jasa tuan

LUCKY berkata...
terima kasih atas kunjungan

nice info... terimakasih sobat..

onlajer berkata...
terima kasih atas kunjungan

Terima kasih atas tips nya

Mas Banjit berkata...
terima kasih atas kunjungan

saya sudah mencobanya, hasilnya bagus,tetapi mengapa kotaknya cuma setengah sehingga tulisannya pun terlihat setengah? Bagaimana solusinya Boss?

Mukhlizz Varocky berkata...
terima kasih atas kunjungan

Cara memberi isi didalamnya gimana ya..?
Maaf pemula

yahaya berkata...
terima kasih atas kunjungan

@Mukhlizz Varockyperlu letak link...lihat tutorial pada bahagian
Untuk memasukkan link anda perlu mengedit bahagian ini pada kod diatas:

yahaya berkata...
terima kasih atas kunjungan

@Mas Banjitperlu ubah ukuran contoh 20px ...cuba ubah padding,margin...

Shep Julcie berkata...
terima kasih atas kunjungan

hello boleh tanya link apa yang mo d kasi masuk??? link blog???

permata hati berkata...
terima kasih atas kunjungan

SALAM.. TUTORIAL NAK BUAT MENU BAR SANGAT MUDAH SAY FAHAM.. TETAPI KENAPA TAK MENJADI YE? DIA KELUAR SEPARUH JE.. THEN BILA SAYA TAMBAH LINK.. DIA KELUAR KAT BAWAH.. TAK MASUK DALAM KOTAK MENU.. TERIMA KASIH

MAHESA MUSICS berkata...
terima kasih atas kunjungan

TERIMAKASIH KAWAN ATAS BANTUANNYA

Dalilati Dayana berkata...
terima kasih atas kunjungan

macam mana nak buat link tuh ? kne buat page statik ke ? mcm mne nak buatt ?

Fokus Impian berkata...
terima kasih atas kunjungan

@Dalilati Dayanakena buat page statik,cuba lihat tutorial

Dede Thea berkata...
terima kasih atas kunjungan

Selamat pagi Kawan,,,Minta ijin memakai tutorial ini,salam persahabatan,,,
Terimakasih

Fokus Impian berkata...
terima kasih atas kunjungan

@Dede Theaok..boleh sobat

etas etassa berkata...
terima kasih atas kunjungan

maaf...saya nak tanya..macam mana nak dapatkan kod untuk iklan?

Fokus Impian berkata...
terima kasih atas kunjungan

@etas etassakena daftra dgn web yang menyediakan khidmat iklan dan dapatkan kod disana

sudirman Mendrova berkata...
terima kasih atas kunjungan

mas gw suka banget blognya,bantuin donk blog gw diseting.

sudirman Mendrova berkata...
terima kasih atas kunjungan

Asli gw suka blognya mas, bantuin donk di blog gw.
biar jd gimana mas

Firmana putra,S.I.Kom berkata...
terima kasih atas kunjungan

tq

mochammad rokim berkata...
terima kasih atas kunjungan

thanks aku udah nyoba di http://kontesbisnis.blogspot.com

SALMAN SAIDI berkata...
terima kasih atas kunjungan

thanks ilmux

ARYBECKHAM berkata...
terima kasih atas kunjungan

thanks