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.

Post a Comment

61 Comments:

Sekapur Sireh said...
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...

sibersensasi said...
Teknik Buat Blog

@Sekapur SirehBoleh letak kiri atau kanan saja

izee said...
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.

sibersensasi said...
Teknik Buat Blog

pada tanda "#" masukkan link yg dikehendakki

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

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

sibersensasi said...
Teknik Buat Blog

@Blog Guru PI Panglimaletak url cth mcm ni:

http://teknikbuatblog.blogspot.com

sibersensasi said...
Teknik Buat Blog

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

geekz36 said...
Teknik Buat Blog

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

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

alright, tq for the respond

Muhd Shamil said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

@Muhd Shamilrujuk pada artikel teks bergerak pada title bar

mia famira said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

@FAMIRAH AMIRAHcuba semak pada tutorial cara letak favicon pada url

Riduan said...
Teknik Buat Blog

Nice info...thanks

Miss Anne said...
Teknik Buat Blog

mcm mane nak centre kan horizontal menu tu ?

Anonymous said...
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..

Anonymous said...
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..

Shahira Ess said...
Teknik Buat Blog

laa, nape tak boleh seret ke bawah header pun?

sibersensasi said...
Teknik Buat Blog

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

tukar nilai seperti diatas

cik chenta said...
Teknik Buat Blog

masukkan link anda tu link yg mane ek ? tq

eB said...
Teknik Buat Blog

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

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

terimakasuh kawan atas info dan bantuannya

Fadillah said...
Teknik Buat Blog

mau lihat yang lebih sederhana visit my blog

Fadillah said...
Teknik Buat Blog

visit my blo ada yang lbh sederhana

Beck Inspiration said...
Teknik Buat Blog

salam,. thanksatas infonya...!!!

Cikgu Yani said...
Teknik Buat Blog

terima kasih tunjuk ajar

sibersensasi said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

thank for the sharing tip,it's nice

Lutfie Tutorial Blog said...
Teknik Buat Blog

mantap gan tutorial nya

Bayu Aji Pangestu said...
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

sibersensasi said...
Teknik Buat Blog

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

DIARI SEORG GADIS said...
Teknik Buat Blog

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

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

Home saya tak ilink,caranya bagaimana

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

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

LUCKY said...
Teknik Buat Blog

nice info... terimakasih sobat..

onlajer said...
Teknik Buat Blog

Terima kasih atas tips nya

Mas Banjit said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

Cara memberi isi didalamnya gimana ya..?
Maaf pemula

sibersensasi said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

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

KAK WAN said...
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

Eko mahesa said...
Teknik Buat Blog

TERIMAKASIH KAWAN ATAS BANTUANNYA

Unknown said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

@Dalilati Dayanakena buat page statik,cuba lihat tutorial

dedetea66 said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

@Dede Theaok..boleh sobat

Anonymous said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

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

Firmana Putra,S.IKom said...
Teknik Buat Blog

tq

Kang Rokim said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

thanks ilmux

Guru PPKN Abad 21 said...
Teknik Buat Blog

Thaks.....