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...
Teknik Buat Blog

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...
Teknik Buat Blog

@Sekapur SirehBoleh letak kiri atau kanan saja

izee berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

pada tanda "#" masukkan link yg dikehendakki

Haziq Zainal berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

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...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

@Blog Guru PI Panglimaletak url cth mcm ni:

http://teknikbuatblog.blogspot.com

yahaya berkata...
Teknik Buat Blog

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

geekz36 berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

geekz36 berkata...
Teknik Buat Blog

alright, tq for the respond

Muhd Shamil berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

@Muhd Shamilrujuk pada artikel teks bergerak pada title bar

FAMIRAH AMIRAH berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

@FAMIRAH AMIRAHcuba semak pada tutorial cara letak favicon pada url

Riduan berkata...
Teknik Buat Blog

Nice info...thanks

Queen ANNE berkata...
Teknik Buat Blog

mcm mane nak centre kan horizontal menu tu ?

Tanpa Nama berkata...
Teknik Buat Blog

@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...
Teknik Buat Blog

@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...
Teknik Buat Blog

laa, nape tak boleh seret ke bawah header pun?

yahaya berkata...
Teknik Buat Blog

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

tukar nilai seperti diatas

cik chenta berkata...
Teknik Buat Blog

masukkan link anda tu link yg mane ek ? tq

eB ezrin berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

endi berkata...
Teknik Buat Blog

terimakasuh kawan atas info dan bantuannya

Fadillah berkata...
Teknik Buat Blog

mau lihat yang lebih sederhana visit my blog

Fadillah berkata...
Teknik Buat Blog

visit my blo ada yang lbh sederhana

Akky berkata...
Teknik Buat Blog

salam,. thanksatas infonya...!!!

Cikgu Yani berkata...
Teknik Buat Blog

terima kasih tunjuk ajar

yahaya berkata...
Teknik Buat Blog

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

food4life berkata...
Teknik Buat Blog

thank for the sharing tip,it's nice

Lutfie Tutorial Blog berkata...
Teknik Buat Blog

mantap gan tutorial nya

vat_you berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

happy go lucky!! berkata...
Teknik Buat Blog

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

decloset berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

Home saya tak ilink,caranya bagaimana

yahaya berkata...
Teknik Buat Blog

@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...
Teknik Buat Blog

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

LUCKY berkata...
Teknik Buat Blog

nice info... terimakasih sobat..

onlajer berkata...
Teknik Buat Blog

Terima kasih atas tips nya

Mas Banjit berkata...
Teknik Buat Blog

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

Mukhlizz Varocky berkata...
Teknik Buat Blog

Cara memberi isi didalamnya gimana ya..?
Maaf pemula

yahaya berkata...
Teknik Buat Blog

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

yahaya berkata...
Teknik Buat Blog

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

Shep Julcie berkata...
Teknik Buat Blog

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

permata hati berkata...
Teknik Buat Blog

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...
Teknik Buat Blog

TERIMAKASIH KAWAN ATAS BANTUANNYA

Dalilati Dayana berkata...
Teknik Buat Blog

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

Fokus Impian berkata...
Teknik Buat Blog

@Dalilati Dayanakena buat page statik,cuba lihat tutorial

Dede Thea berkata...
Teknik Buat Blog

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

Fokus Impian berkata...
Teknik Buat Blog

@Dede Theaok..boleh sobat

etas etassa berkata...
Teknik Buat Blog

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

Fokus Impian berkata...
Teknik Buat Blog

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

sudirman Mendrova berkata...
Teknik Buat Blog

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

sudirman Mendrova berkata...
Teknik Buat Blog

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

Firmana putra,S.I.Kom berkata...
Teknik Buat Blog

tq

mochammad rokim berkata...
Teknik Buat Blog

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

SALMAN SAIDI berkata...
Teknik Buat Blog

thanks ilmux

ARYBECKHAM berkata...
Teknik Buat Blog

thanks