1News Online:
Home » » Tutorial Blog - Cara pasang menu bar dengan drop down versi pink

Tutorial Blog - Cara pasang menu bar dengan drop down versi pink

Wednesday, October 31, 2012 | 3:09 AM


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>

Kongsi artikel ini : :

Post a Comment

 
Copyright © 2012. 1News Online - All Rights Reserved
Proudly powered by Blogger