• Natlie Imbruglia

    Doesn`t she look very cool?

  • Thousands of Years

    Earth has lived thousands of years...

  • Fruits

    Fruits are vital for health and their nutrients...

  • The Lonely Road

    The Lonely Road reminds Me with You...

  • Twister

    Here are some twisting graphics for you...

Sunday, February 21, 2010

Cara pasang menu bar pada blog


Untuk memasang menu bar dibawah header, seperti yang boleh anda lihat pada blog ini (sila klik), sila ikut beberapa langkah yang di tunjukkan di bawah.

p/s: Sila save script template anda.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, taip atau paste kod ]]></b:skin> pada ruang Find. Seterusnya tekan Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste di atas atau sebelum kod ]]></b:skin> ( rujuk langkah 2)

p/s: Anda boleh edit kod biru yang di bold mengikut keseuaian blog anda jika perlu.

/* menu bar */
#menubar{
margin: 0;
padding: 0;
float:left;
border:1px solid #e5e5e5;
width:100%;
background:#e5e5e5;
}

#menubar li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;
}

#menubar li a{
display: block;
margin: 0;
padding: 4px 10px;
background: #666;
color: #fff;
text-align: center;
text-decoration: none;
border:2px solid #ffffff;
border-right:3px solid #ccc;
}

#menubar li a:hover{
background: #000;
}

#menubar div{
position: absolute;
visibility: hidden;
}

Langkah 4

Salin kod merah di bawah dan edit pada notepad. Gantikan kod merah yang di bold dengan URL dan teks pilihan anda.

<ul id='menubar'>
<li><a href='#'>HOME</a></li>
<li><a href='masukkan URL profile di sini'>PROFILE SAYA</a></li>
<li><a href='mailto:masukkan e mail di sini'>E MAIL SAYA</a></li>
<li><a href='masukkan link 1'>LINK 1</a></li>
<li><a href='masukkan link 2'>LINK 2</a></li>
</ul>

Langkah 5

Dengan menggunakan keyboard, taip atau paste kod <div id='content-wrapper'> pada ruang Find dan seterusnya tekan Enter.

Langkah 6 

Salin kod berwarna merah yang telah di edit (rujuk langkah 4) dan paste kod tersebut di bawah atau selepas kod <div id='content-wrapper'> (rujuk langkah 5)


Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.


13 comments:

  1. hehehe,, bro nes,, ade x care gune add gadget jew??? blog aku xsesuai gune care paste kat body,heheh

    ReplyDelete
  2. @Liyanaa.

    Pages yang macam mana tu T_T

    p/s: T_T = Icon apa tu?

    ReplyDelete
  3. I'm done here, thnx :)

    ~THNX TO U ! BRU JEK RQ, DA ADA DA TUTORIAL NI :)

    ReplyDelete
  4. hehe..thanks nes...
    tp nak request tutorial bleh tak..??
    Mcm mana nak masukkan flash kat header tu..
    mcm blog nes la...??
    harap2 bleh berkongsi..


    thanx...

    ReplyDelete
  5. best2... mmg ini yg kucari selama in.. TQ.....

    ReplyDelete
  6. cantekkkk.. kalu nk tukar2 kaler mcm mn plak? kna adjust kt bagian mn?

    ReplyDelete
  7. banyaknya ilmu dalam blog ni..
    terima kasih...
    sangat menghargainya..

    ReplyDelete
  8. kalau takda div id="content-wrapper" macam ne ek?

    ReplyDelete
  9. kalo xde div id="content-wrapper" mcm ne yer??

    ReplyDelete
  10. Cuba guna kod yang ni pulak

    <div id='content-wrapper'>

    ReplyDelete
  11. xde jugakla...koding tu warna merah bile search..

    ReplyDelete