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/AVvXsEhhuW_z4zqF3maiSWJuCy_J3bdZPkzPiJ4MrhNXBC-UJfz09RWVDOQQpKNJX531X0scWvBQzXo70TABGZhIiKc52LmJKNti23WFC0e3AlVlUI6l7HLSwaThABfm76kDXHqKCQP6Xjr8_ko/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/AVvXsEiwlPk279D-74zYnzX5MFbDt_IGfcuQSp3lEhjEszr7TLl1QZMfsMwHtQWxn6q0OwMLs2oMeysxIVNRINhFPxFvF4NlBMoPQDW-hxYXFyIXPryEAT-q030py1wir1HWXXlyPm8zD7Kzr50/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/AVvXsEgviyURNVhwbb6NnzpX92rEmCHEIZJ9B9NcLYnkuemJpoFF31GoZC8Kj2GJFMhDlF9F5FMta5tBsXGn3oMxrQOTKoWABpT6oqFjbskv1Tc8iWDfLKpUOQZyCxqqlxhau0lW8_Wcd9y0_sY/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/AVvXsEhVWUeHUC8Xe2YI2_whQTQFNWicrhDmOs8DDeQ2AgfIxHskV6OHJzmxTFAEgJNbUgGtAVskFkPdqpU17NX-plla7LC_1AcgffKZAiEL_vS_L54XA7Zh9erFgjWykyLr3F8yiGLid85eCQc/s400/dropdown.png");
z-index: 50;
overflow: hidden;
}
ul#pinkmenubar > li > ul:hover{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQBQzqpOIt0riQiHcmecq-aR1EdcKSE1zmuuvPD9y7-VxmrhB8pNK9uZHauHKPFshWEosX_spDPYme1o40sEHbjdd0DCJ_NuiudGhOFAid9C06eI2WuIrfMrgoiY75Rqx9YiTD5nkgDrc/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/AVvXsEhScj8j4ZXWHkJ0kb3L7e7gduCfK4NN4zHQQcRxhhtLQKXaHdOq_Yf1FrcEfZJca2_g8NZ5lqVB1TnQpL0r4ryvl83iYPaaMhXWy9nyvXY8XR90VgoIQIPDMN3ZrJGlwpO97lAjFyC6moA/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/AVvXsEgdrIwvTKePUrroUSjEwueLkf7SHhA5jeyDxzbZH6sjuvGfje6-pAa85azdHGKdA66SBdmdfyPLMKCB_EYnDfQ_2LyLI8SIxFBElSyZewqxyPnbssMWfoTYkvLmQWjn7VbAdCRYcl2U5u4/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/AVvXsEgg2Hmae326as3SIPWhyKk-Vj8SDLfwzfJw3lWNjzWyvNqy-K-9gpSIk7xCvtJmNdGbmZi5MF01iwYxDWG91CqaEVD18rVpB0C6spWBHngAUBPjYB-r0FetBgRKJdh4RUYA2pft_u6hh9A/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/AVvXsEjnNFz36LhUDszN5yAHFf19xjr3Jf0Qth8ROCCyX-L-elgK8uSb7B7nYvo4P85oZgJATB4EIVG6Gy1TgfjLNtUy0ovyVxYvR0XpCfNsZiocqNCA9Py5H65Gl6CqanqOoiRwpOUGjavfNYE/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/AVvXsEjIbpXhPS0uo4DEzIHNtlo4FYf-fKJ2DwUEDMMhOLG6nO8CFolmJvQSX6MZ56QTMJ_xT83duNOLU46Rb_CQqS9vhb4nnKxu1CrLVUHug-GisSANz1Xp1XtcQW4g-bwycySjcDQl4KduMZc/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</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>
0 comments:
Post a Comment