Tutorial : 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUwENGkO8dG7CJ7rsIF0-9wTNMCykmHFjvoXJO_EKmPqXGgBQE1XUC8uXUy__GE5pQM5b-bDPSfRnGoDPQtlXH1c_6h3bThj5-Zppbq2cB49lMIM_2Nc1lln-lhEtEfedl397V-SoPQls/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeL_U_naMRB8Ujjjf1jekzw12Zbatqnkit9kFZkE0moqCCvJAwQ1xCY2Zg9HDofeG10z120GND8JgjutRtsUhYT2bUcT4MuSfUmlij11_pQLPp_FlyiDPR0biNIZ-BZ0dcfjTfMZemyos/s400/buttonbg.png");

font-size: 13px;

color: #FA69CC;

text-decoration: none;

font-family: Trebuchet MS;

}

#pinkmenubar > li:hover > a{

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh4IPy1p8rM5LPw7u1qmJccXOrVYF0FoOAbxvawlJeaQe5GDNweSg854uv2zDyMpMShARLM-54UNCLw9UdDPlWxq_ZUutPpLKR21wbl1sjZEVM5hE-KeiC277nkce5EvyYxu-4o1WC0rs/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHK74MQSZPPDnl56T7aNJLXuIL3u0rtOXd9M83rAXa4JxLaYkav-nbic_FJ0npprHw0YmeGEddTVlGqv_Uwi8vhyu5pT3VcO1Fm5u3O2y23Ao7u1tMvZYNUKZxkiMmHIu4k-P5u1wqmVc/s400/dropdown.png");

z-index: 50;

overflow: hidden;

}

ul#pinkmenubar > li > ul:hover{

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE6SBrc3T1X4yxOEvHKdPazyl7Iwve890yRE3Rs06jDAhBDVqE7eVoj2aamUmw1ZMkQWVBN8gR4wAyiVhDWa8t9YLNdyx5TW8XMAG7xvEWoa72wtvc6q8aTaE3xRLMu2JEayYvBOuET-g/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0GvB2NOqSZRJLHLR5K8Riup7hhMOlCZpwuCqR6vlzkg9tbA3oLGk11RfKP1vH3xFuqKYJXo5-zkGyjJgM0zU_1yQybld0kpeAkXEIRrfkTjlyQErnrhIrg_2_tjoDrG1ANbkP_nUXOpE/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCJL3E0aQDOmyQt9G0zjdbdPazRIfhLMa3o4I58nAUHruHOC_D1XzBr6iARq_bLZO-Q3UW-iK2hKplq3WskfmsGtpinCXx6Dro8XtOVLLLxrwvxeBcrFu0ljynx8O4Arw0o8wMA4EAGSA/s400/bottomsubmenu.png");

background-repeat: no-repeat;

background-position: 0 100%;

}

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

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSgkrUL1Sa8yhfWrYnW4L6bQbjCqblaSu-IxkrKlAeJfOxoTNVI61kufw_NeR2l7w_dfyeZLb2iDVEWDxBLqlv-xLPF36BflvMHKwI5SnhOcuM0buUMZoymUQoop40SqDk6clADA97QJc/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEDxgt4kvwpS4rXoiSKR6eHsNlBIz0fZ5_HV_F9C_KlRZ0ofJkHfzmC8XQ6mOjacz663DuWFjZW-YiKBSQBbwnL-zdVF5KeWYgkMnc5qS4vTOr2rUjdlxIv16QpiNeouXB-CI9e6zbakI/s400/submenubutton.png");

color: #E3099E;

}

ul#pinkmenubar > li > ul:hover > li > a:hover,

ul#pinkmenubar > li > ul:hover > li:hover > a{

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtw589tSI1s9W8-W5k8BySwy3eXEiGWEE4iBZObqDJhSWT6aLIs9sjy46LJFSWbivI72YL5Ax2C4_36zN_xQIvPcCpP1MFk4weALk_mhX9Ei36jAJMZP7ufNM8lflv0GuEm7N9J5C9Vc8/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>


Paste kod yang telah siap di edit pada langkah 4 tadi dan paste di bawah atau selepas </div>