Cara pasang menu bar dengan drop down versi pink


Untuk memasang menu bar dengan drop down versi pink seperti yang boleh anda lihat di sini (sila klik), hanya 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, tekan kekunci Ctrl+F dan taip atau paste kod ]]></b:skin> . Seterusnya, tekan Enter.

Langkah 3

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

#pinkmenubar{
/*float: left;*/
/*width: 100%;*/
margin: 0 0 10px 0 ;
padding: 2px 2px 2px 20px;
height: 28px;

background-color: #FEE4F6;

background-image: url("http://2.bp.blogspot.com/__hqk0jmhlcE/S4Z_msXTuQI/AAAAAAAAAPQ/2o31mNyjXfc/s400/navbg.png");
background-repeat: repeat-x;
background-position: bottom;
border-color: #E3099E;
border-width: 1px 0 1px 0;
border-style: solid;
text-transform: lowercase;
line-height: 100%;
width: auto;

}

#pinkmenubar > li{
float: left;
width: 130px;
height: 28px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

#pinkmenubar > li > a{
display: block;
width: 99px;
height: 15px;
padding: 5px 24px 8px 7px;

background-image: url("http://2.bp.blogspot.com/__hqk0jmhlcE/S4Z_f3TCOBI/AAAAAAAAAPI/7QZOhnEEzHk/s400/buttonbg.png");
font-size: 13px;
color: #FA69CC;
text-decoration: none;
font-family: Trebuchet MS;

}
#pinkmenubar > li:hover > a{
background-image: url("http://1.bp.blogspot.com/__hqk0jmhlcE/S4Z_X9Z56rI/AAAAAAAAAPA/KFjeJWS6wFY/s400/buttonbghover.png");
color: #E3099E;

}

ul#pinkmenubar > li > ul{

/*

position: absolute;
right: 5px;
top: 4px;


*/

float: right;
width: 17px;
height: 20px;


margin-top: -24px;
margin-right: 5px;



padding: 0;

background-image: url("http://2.bp.blogspot.com/__hqk0jmhlcE/S4Z_QazUwjI/AAAAAAAAAO4/7HhGrCGLQ8Q/s400/dropdown.png");
z-index: 50;

overflow: hidden;

}
ul#pinkmenubar > li > ul:hover{

background-image: url("http://2.bp.blogspot.com/__hqk0jmhlcE/S4Z_Eau8sgI/AAAAAAAAAOw/_sLGYPg2Q1M/s400/dropdownhover.png");
overflow: visible;

}


ul#pinkmenubar li ul li{
position: absolute;
margin-left: -9000px;
}
ul#pinkmenubar > li > ul:hover > li{
display: block;
width: 117px;
margin: 0 0 0 -99px;
padding: 0;
position: relative;
z-index: 500;

}

ul#pinkmenubar > li > ul:hover > li:first-child{
margin-top: 18px;
padding-top:3px;

background-image: url("http://1.bp.blogspot.com/__hqk0jmhlcE/S4Z-8SczJuI/AAAAAAAAAOo/2zW3xY391VI/s400/topsubmenu.png");
background-repeat: no-repeat;
background-position: 100% 0;

}
ul#pinkmenubar > li > ul:hover > li:last-child{

padding-bottom:3px;

background-image: url("http://4.bp.blogspot.com/__hqk0jmhlcE/S4Z-zGaPfMI/AAAAAAAAAOg/BC8bKMBHLro/s400/bottomsubmenu.png");
background-repeat: no-repeat;
background-position: 0 100%;

}
ul#pinkmenubar > li > ul:hover > li:last-child:hover{
background-image: url("http://4.bp.blogspot.com/__hqk0jmhlcE/S4Z-o3FM7HI/AAAAAAAAAOY/KR8z_IasEmE/s400/bottomsubmenuhover.png");
}

ul#pinkmenubar > li > ul:hover > li > a{
display: block;
background-color: #FFF5FC;
border-color: #E3099E;
border-width: 0 1px 0 1px;
border-style: solid;
padding: 1px 4px 1px 4px;
margin: 0;
font-family: Trebuchet MS;;
text-decoration: none;
font-size: 12px;
background-image: url("http://2.bp.blogspot.com/__hqk0jmhlcE/S4Z-ggeP4xI/AAAAAAAAAOQ/ur2QXFWB_FM/s400/submenubutton.png");
color: #E3099E;
}
ul#pinkmenubar > li > ul:hover > li > a:hover,
ul#pinkmenubar > li > ul:hover > li:hover > a{
background-image: url("http://2.bp.blogspot.com/__hqk0jmhlcE/S4Z-XHp5mHI/AAAAAAAAAOI/uSpy1EhHZ_s/s400/submenubuttonhover.png");
}

code.pre {
white-space: pre;
background-color: #f8f8f8;
display: block;
line-height: 140%;
}

Langkah 4

Salin kod berwarna merah di bawah dan paste pada notepad. Edit kod yang di bold dengan menggantikan URL dan title anda.

<ul id='pinkmenubar'>
<li ><a href='masukkan URL di sini'>HOME</a></li>

<li ><a href='masukkan URL di sini'>about</a>
<ul>
<li><a href='masukkan URL di sini'>Squirrel?</a></li>
<li><a href='masukkan URL di sini'>Seamus</a></li>
<li><a href='masukkan URL di sini'>Portfolio</a></li>
<li><a href='masukkan URL di sini'>Contact</a></li>
</ul>
</li>

<li ><a href='masukkan URL di sini'>play ground</a>
<ul>
<li><a href='masukkan URL di sini'>css play</a></li>
<li><a href='masukkan URL di sini'>xsl&lt;/a></li>
<li><a href='masukkan URL di sini'>backgrounds</a></li>
<li><a href='masukkan URL di sini'>flash</a></li>
</ul>

</li>
<li ><a href='masukkan URL di sini'>rants</a></li>

</ul>

Langkah 5

Sekali lagi, dengan menggunakan keyboard, taip atau paste kod <div id='content-wrapper'>

Langkah 6

Salin kod yang telah siap di edit pada langkah 4 tadi dan paste kod tersebut di bawah atau selepas kod <div id='content-wrapper'>

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


p/s:

Jika kod <div id='content-wrapper'> tiada pada script template anda, gantikan dengan <div id='header-wrapper'> . Seterusnya cari penutup kod <div id='header-wrapper'> iaitu </div>

Contoh:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='my test page (Header)' type='Header'/>
</b:section>
</div>
-----> Penutup

Paste kod yang telah siap di edit pada langkah 4 tadi dan paste di bawah atau selepas </div>
Cara pasang menu bar dengan drop down versi pink

wah, xreti la. haha





http://fitridzulkifli.blogspot.com

Camne nak buat kat bawah entri tu `Anda Mungkin Meminati..`

Menarik gak nih... truskan memberi info yang bermanfaat ye Nes?

@Rohana

Cuba check sini http://maribinablog.blogspot.com/2010/01/cara-pasang-widget-related-posts-di.html

@Dak Wan

Baik tuan. Akan diusahakan. Kehkeh

cool...boleh tukar kaler len ke? urh~ tanye~

@S.I.D

Tak boleh. Sebab guna image. Memang khas kaler pink. Kehkeh

tunggu tutorial lepas ni.

thanks...
blh x kita nak guna banner dimension 700pixel?

salam....macam mana nak bagi blog aku berfungsi benda2 ni (About, Faq, Contact). Yg ok cuma home. cuba singgah sini http://akuiza.blogspot.com

macam mana kalau nak letak widget.. yg banyak kolum kat bawah sekali dalam page?

Saya suka ini sebab its pink version !
Akan ku cuba in the mere future :D

salam saudara....maafla saya amik sikit ilmu dari sedarsa ni...tapi saya buat ada error la.dia katewr kene terminate "a" pada akhir meta tag..macam manerr tu? tq

terima kasih coz bg tips yang berguna nie..heheh..harap boleh di apply kan...boleh copy content skit??..hehehe;-)

abg nes, ade x mcm drop menu tu jgk..tp bkn nk letak menu2 tu..just nk letak urL blog kwn2 je..jd bila da ltk tu, n bila da klik.. trus kuar( drop) link blog kwn2 tu..

@dakkerek92

Cuba check kat sini

http://maribinablog.blogspot.com/2009/06/bagaimana-membina-drop-menu.html

salam saudara,
saya azami..nak tanya, apasal saya punya keluar mesej ni...Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "li" must be terminated by the matching end-tag "". kalau boleh bantuu

ada error kat ;/a> lpa letak tag <

bro... x ada drop down menu color biru ke? :)

x jadilah aku buat..macam mane ni..dah bayak kali aku cuba,ade tutorial bergambar x..hehehe

salam..saya masih tak berjaya membuatnya..oooo

Yg langkah ke-5, bile klik find, xde...
camne erk???

Kalo nak tukar backgroud warna putih dan tulisan hitam ape kodnya?

saya takde code langkah 5 atau 6..

sya takde kedua2 code ni.. nape ek.. camner nak buat?

dua2 code yg diberi takde dalam script template saye..

byk sngat kna buat mlas la plak hik hik hik :)

"kedua-dua kod langkah 5 dan 6 ini saya takde macam mana nak buat. harap tolong"

arghhhh peningnya.semua langkah dh saya buat.bila nak preview tak dpt.plz help me mr. nescafe ais

salamm . notepad apa ? tak jumpaa pun --"

SALAM
KOD header-wrapper
XDE LA DALAM tu.. pastu ble find yang nie div
ade byk pulak..

saya pastekan y dari notepad kat salah satu bwh div jd error lak.. tulung2.. need ur help

kod tu saya xdapat tulis penuh kat sini.. not allowed lak..so pepaham la yea

kenapa tak boleh jumpa yang

<div tu ...

ni ??
tak dapat pon . dah tekan dah yang expad tu .. tapi asal tak boley ??

sama macam saya. apa y perlu buat?