Cara pasang menu bar dengan drop down versi pink

Untuk memasang menu bar dengan drop down versi pink ,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/AVvXsEgy3SEFO_ztP_ynmRyxVJT4yInt442myTBWCjUjxyK0aJ7wAkDm-61LedleuYOIE2X4k9MXthtV5vW0UlUcRIgzL_U94AbAKuEQ5PSWQRoBk_G94kzJV3Ua3lgOZda1JFrB5rKHS3mWphM/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/AVvXsEh3qgcI0MHKAmyREVlHk9zj4yNd32fAaZlucfWAF0TgUvFW4IaDeiinNtRFTc673BOWiZ9tIvXo6dIGu-bwDeTKS_xVFnbakdPTzeiLDRC4dV1uYWRo7HK6YWq3wLRgfYyh7ZN4Wcju_KM/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/AVvXsEjFQAO9lm0USci83R43QjzV_fvs_RWPX0YU6lD2lAFrgmHJcGhaUAX5O8lSCIWthLzIaeslGxZo0gs0-RO-uKOm96FwCnwxxMfz1NlOmDffqZtNayZK7Y0dCzlNuHpUG5xk5qbJtPTj6_A/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/AVvXsEjGd5nV1K8rfBVaANYif_ElVraKqKE9UQaF2qUCSVt_o5-xu-jDrIc28PW69iFas3gHS9I4oFeIa3y0cuN8iJwAIDOXrYA06h-X8hrWs_QfEKDlRdIC7gDlFWspxLEoR18jAJbH8qbaBpg/s400/dropdown.png");
z-index: 50;

overflow: hidden;

}
ul#pinkmenubar > li > ul:hover{

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeCkUejQlZJZ2rmYdKXbZHe5S2Gjz9Lf3bpQ_iVCqDZTbz2Bn-dJlacy14Pzhw_lqSDM0pAuoe0tLk0YYOCAEVfwnh8zo59tRKF4vDN7mGYoeI-XZoiVlVAeAx76WAqbLtCYTDQ9HKKao/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/AVvXsEiOlvvSiCusLqlKH0XRiXhzWEkBTTL5jQyUzX-Lkv5LDLUQBi5ngc1Utzgv8OrqWZBYLTWlzwCtiNeXjI_SoyrscbdA0mik08CunYIbF-qvIzs4Ise9olBVN9OQE3g97RId3O49qv39-K0/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/AVvXsEj62O7Ks2a5kQFvUPTFsDX4DTy3EJZE1dj8QtdlNNqCWnV_aRGQTN7mf1ffHorkscnv9Mfx-KmGr0jcVBau30Rf7-yyH-CN2crN6XsqnnXK0QxqckW9tCrgHz41Er2Okgsl46UCFtnoB_Q/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/AVvXsEjCteeoaCx8_27DeGxowEup56CnILSGe5K6duGfCD7PU-_PWcAP-mojux-CFsBOdfLu1JT1QhjhOwmMH5hYkvyp4AgJ7Pl72uln-_DMeEyuUSaIoQubCmn7SuUKVXZjg1jpXg9gdO3LPHA/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/AVvXsEgA8hJD197H8hD5Tdj6-5c5_eJf9PDu5amom5BbSYdd7ZrUp96oDI8CxxVKgwxpR2vI5gcTjvbLnCMzbb2Pe89fuUX_cBSjw_OaMgKXaZ1SpO306f5iUYnQFTqbiHRD-FCaxmus1-8qKuk/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/AVvXsEgtQ8rg9bIGYU1k7lgl8oQZ4Sv2VU5orxspjHQnCl7Ld8NMB-oluxMYYlgRfNr-wdMdaCMY60TwB-ITr1tSDde5F-y3LsKRs9XNjOh7Sr-MFLSQlUSb7jxcTa7zD021-AO1zQtJ344RmE0/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.

<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'>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>
sumber...http://maribinablog.blogspot.com

Mas'Prayit™

NavBar

NavBar

Search This Blog

Senin, 30 April 2012