• Natlie Imbruglia

    Doesn`t she look very cool?

  • Thousands of Years

    Earth has lived thousands of years...

  • Fruits

    Fruits are vital for health and their nutrients...

  • The Lonely Road

    The Lonely Road reminds Me with You...

  • Twister

    Here are some twisting graphics for you...

Thursday, February 25, 2010

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/AVvXsEhSv0B4aRkHzC2TEHKrri6D2H8cgHT9nEG9DIhWja5Q0gGc0IplPQWa9sDoYOqHzkcGw6eN14HS8eycQ8AdRNkpWKpeKzXxB7B2USJHkDkRRTuiInZtiWFA9YP2O-ut2QbWRi7ESHl_HqI/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/AVvXsEhAck-H5ke5Mue2eOoMX_1BDbQ5ZtRasIiBk2hURa2lrzslvqkFK1Ob-Xjvmb_Ndj7Debjx7zkZSZ4oI9wBsPvMeEmPrJFO_xZOIuBI7XCb6ssf0xWtRkzRdX6qpu9_5Qn8Z_bZNmRxTKQ/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/AVvXsEhysrOa6u0DtXglsTGq5KvzfnIG74_oC7SgTD7Jw2w22iuUlLfR0yHpJ3_g8LpbaAjmCnIHez6NT38cVl-ciLV_5e9bO-4WbGB8ieSVKnaaujPTvyX0wsGfmp_yYuJ2O-43FR-NxAerKcU/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/AVvXsEjUoatqnUzppfL5nYUi_gNjrD5ixMPwUl38tWsvq39NywYKgYamiE24jBW3WspWKyQSVSRZviqMzL5Kbs-uaBp-85dv1Q88vowhvTaaSGUcT08Ub1QniKERy9DnDQaD9eQFn-tVurkTTak/s400/dropdown.png");
z-index: 50;

overflow: hidden;

}
ul#pinkmenubar > li > ul:hover{

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS-QW5BnsMiY1xPdWnJeiuHiWsp33dWOclD8vNbY7HmZaxj6mxQaIMPSeRYOsFrZwS7lPv1D4vmCtCohwgmm7YcOjKeMoP47lEXCh-pI0mgFufVaUATkGTEyg0A9eCK9wdwYgU26kA0hY/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/AVvXsEgJ2Wc6xq1ElHG7uLlHKmUrGuoCrWki_hjIEdUUXL_LhGk3EsvGsNVgsbATcAuh6pRwjNGouEqXJpLyohHgQyTvyvOZfmmPmJJeq676dS0EHJfx9MkSqMr_UDMJQSDIzA-1jyCpWzhIorc/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/AVvXsEiudWuMBlOoeQOJX26H4gVuKJtv2DKLhmAAf3qqKXBPKz9-wZ7M0d16QjLCQxadV0Hy05GFPQRcYv8uRvTK70QGoueDHc8n6z_ZNltX78bNf5aAzpCO-mQ8PQN7OvxCMOWKLnFk_8u0ht8/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/AVvXsEgYNkjudixWHfghIQ0E_GQf1JPKeuPg00aFKJAmncnfg-jKEvU93ND6HT_9ENckVPEGRQ6Wzeg_PGx-PmqhxCAH5Y7aFCZrDhrkAxYrGV04-yCE1zeMrsWEnP58QA0qL1n-s4Bsz4rlEKY/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/AVvXsEiUuh6HR8RM4-HRrc_I4TxkRVobzjOzR4uiM6jfEdtmMn2qyse84DcUXYitLU3kKSD7ZrinAMUdgEed6dEpcPm40r1FoaBA9UscLcM92H6Gb8lFVxfYorou7OEqhrWgNR-UzhIvaDYEcxQ/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/AVvXsEgxh_eGQSfP3f0dWdqtPd4N1LJ0V22i8e21hz7rr84F9YH8n4FvmOx2e6S7kPkXcxYxKb13oxxNpqvgprq2sjLcjOKm63iYs1jeYWUX1UuiO7VRdt6MWXmZ2M_AHYqHspJ44COsHWDHFhI/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>

10 comments:

  1. wah, xreti la. haha





    http://fitridzulkifli.blogspot.com

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

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

    ReplyDelete
  4. @Dak Wan

    Baik tuan. Akan diusahakan. Kehkeh

    ReplyDelete
  5. @Rohana

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

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

    ReplyDelete
  7. @S.I.D

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

    tunggu tutorial lepas ni.

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

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

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

    ReplyDelete