Zidier ™: Cara buat Drop Down menu Blue Dawn

Cara buat Drop Down menu Blue Dawn

Kembali kedunia Menu menuan, kumpulancara Langsung saja Tanpa perlu basa basi dan tidak perlu panjang lebar, silahkan sobat ikuti langkah berikut ini untuk pasang Drop Down menu Blue Dawn.

Namun sebelumnya siapa tahu sobat tertarik juga menggunakan menu-menu berikut ini :

Drop Down menu Massive Blue | Menu Keren melayang di sisi blog | Down menu Sunrise Gloss

Berikut caranya :
Pertama
Klik + Centang

Kedua
Cari kode ]]></b:skin>

Setelah ketemu Letakkan kode berikut diatasnya / Sebelum ]]></b:skin>

.wrapper1{

color: #44433f;

font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;

margin: 0;

padding: 4px 0 0;

}

.wrapper1 a{

color: #E5F2FB;

text-decoration: none;

}

.wrapper1 a:hover {

color: #09548B;

}

.wrapper1 p {

margin: 0 0 17px;

padding: 0;

line-height: 18px;

}

.wrapper {

/*width: 710px;*/

margin: 20px auto;

}

.nav {

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlI2MrMhKoT_dbQNAVoe27HY0Bo6QMwL-iuPqWajvxgOfLs2KGrJUH3wqbdlRrn50ICQiYHBM0ITTXR-Xu_1ELoYabmhquWOySCQVp55o4vOf-_NLYXuu_6AF-cB017ApKvoGPEwmbtFA/h120/nav_bg.png) repeat-x;

float: left;

}

.nev-wrapper {

clear: both;

float: left;

}

.nav-left {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5cMY6aivhal8gT4i_hkxCYhupKxJAC7cmBl7l5rjLkUUHR5CmrCFxR3FXz3tVFyhiMLZpErl2PO5fWga5RtP7_lxbhrVlQedvxYx_3d6HPBQrjceCII2g-tIU0asmCrXHfmiRdnjIaC8/h120/nav_left.png) no-repeat top left;

float: left;

width: 11px;

height: 41px;

}

.nav-right {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixWer-P3lR9GHlVUF2YKm3FsBuhH8jbEP5sY-EjQ9iaG3p_HhUsGHt-Ckik8vi2ZKJP-fK2h0_P0YSTZJ9MS99jo4FZSdtznP3J0wI956abisoB9REy4wouX9TCLuyht1t87doei45ztU/h120/nav_right.png) no-repeat top right;

float: left;

width: 11px;

height: 41px;

}

.nav ul {

/*width: 648px;*/

height: 38px;

float: left;

margin: 0;

padding-top: 3px;

list-style: none;

font-size: 15px;

}

.nav li {

float: left;

padding: 0 7px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmD24QCXEV1F79KafZujgoRJW673v8Nz-niH0UxcSyQgmjH3GwL6OXn3SJtxMtXEpyNbrhSRLOpLJw4upwJUNMsDH82DtTX06vlQS_LPA_vN80-7lBUGIa29qc2QRbog2TWxRHtv0Zask/h120/split.png) no-repeat right center;

position: relative;

z-index: 1;

}

.nav li.last {

background:none;

}

.nav li:hover {

z-index:2;

}

.nav li a {

display: block;

line-height: 38px;

overflow: hidden;

float: left;

}

a .menu-left {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitiJ2Cd2B1EC5_6At7MdE7QhIJoZRJvc_lNic19CnzqqtADpFjmpbdje0PUBf5rCXXN6vxXp_pr0UPn9LwKLuIrvlNnqGkSlulcOdUjqVf_TeiW7Fpolh-WcCTRIZ-l4nxi-vhRDc6ceQ/h120/menu_left.gif) no-repeat left top;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-mid {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVEv2oai6BwpyOk71chORlBph7QKcL-3ifF6aKF5EhyO0VNV6ObloSCp1HCIy4mcw3qQ-tBw-V47CgEHkB4ZckEdL08yMwnP1QtK51COlKnj_1ROt4PU-M5e72evmqPcn9PImHNZLzXWA/h120/menu_mid.gif) repeat-x top left;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-right {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-dPRXsXfuhBwaPnZglc8Jxvmav4-6Ew5JMgGl_xfJA1MUPGnt4L7lUQPEuBAlYnBlZajvcl9_x5HbOz7J3YAK9ZVFr2AZegiD7Jr62qDT06nWXngCgjd8ialYw8ffm2Jcjqoswy2YHI/h120/menu_right.gif) no-repeat top left;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

.nav li a:hover .menu-left,

.nav li.active a .menu-left,

.nav li:hover a .menu-left,

.nav li a:hover .menu-mid,

.nav li.active a .menu-mid,

.nav li:hover a .menu-mid,

.nav li a:hover .menu-right,

.nav li.active a .menu-right,

.nav li:hover a .menu-right {

background-position: 0 -37px;

line-height: 35px;

}

.nav li a:hover,

.nav li.active a,

.nav li.hover a,

.nav li:hover a {

color: #09548B;

}

.nav li:hover .sub,

.nav li.hover .sub {

display:block;

}

.nav li .sub {

display: none;

position: absolute;

top: 27px;

left: 6px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfjvXykMDNYFgFvrXGvjxfFZMrJf56zOih880d5T7c2r4j567y9oYm12_a3Qv3mirhb6S_ALyq_59WY7z7fce-wov8Wg23GxIEaPEodMt9DHvcOv02KwGudvYgyl_WPh_g9IMwMZsNCCU/s144/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNN6fZT7e6uToncCirZ9l5s9nDWeURLNdkQYspPJqiO3xuUQu4_ehDdIKADjsnex6VERSD4bk-TwzZn55PTAciKxM8ghm8OVk4s32pR-DarPbMmGSZAvvZx2Twgjb8Ira2qg4-WcC5KnKF/s1600/submenu_bg.png) repeat-y;

width: 162px;

height: auto;

margin: 0;

padding: 0 12px 10px;

list-style: none;

font-size: 14px;

}
.nav li:hover li,

.nav li.active li {

width: 100%;

padding: 1px 0 2px;

border-bottom: 1px #C1D9F0 dashed;

background: none !important;

}

.nav li:hover li a,

.nav li.active li a {

color: #09548B;

background: none !important;

line-height: normal;

width: 156px;

padding: 8px 3px 3px;

text-indent: 1px;

}

.nav li:hover li a:hover,

.nav li.active li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/*IE*/

.nav li li a:hover,

.nav li li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/**/

.nav .btm-bg {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrgURajhJSWbI6f1j5yWGvbv_FJMnl0KGaVv3M5Yq-MF5KAvaGX2QY-N5ACnN8A5l5obr9RBWgvI3U6Mh_vlBrdAU_-K8ay5-T4zTe1c49ejx_gMMZy3z1_X5B_kYnvT_bq0AqIfB955A/s1600/submenu_bottom.png) no-repeat;

width: 205px;

height: 9px;

overflow: hidden;

clear: both;

}

.content {

width: 670px;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxNQo57QygrOir-eSDzp3JMYENdYJxA1gv3MW8iua2f8tHoTFHWum2pKfZ4ccLmmcoFo_hvUPh13cPVh1lOOGhzID_Nz-zis-39xBxqRCaLIpNce5RvUknqYSm_dwb2-ZLidSie5fiHNI/s1600/content_bg.png) repeat-y;

float: left;

padding: 10px 20px;

}

.content h1 {

color: #333;

font-weight: 400;

text-transform: uppercase;

font-size: 18px;

border-bottom: 1px dashed #C1D9F0;

}

.content h2 {

font-weight: 400;

text-transform: uppercase;

font-size: 14px;

padding-left: 10px;

margin-bottom: -5px;

}

.content p {

padding: 0 15px;

text-align: justify;

}

.content-bottom {

width: 710px;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhiOhM1WdlqJaNn54UMaGriq8mWWa_ZXdZtgLDpaPMH31yPaU7I8mS5F3r1txHa8FJkxg7A7vFJz1v6BlmX3r7zjEtS8F4Qdh5HDW6QPop7CKQxfCpfCdKlCDN0jX2HR1Q-bZnSimpqs-/s1600/content_bottom.png) no-repeat;

height: 13px;

float: left;

}

Silahkan Simpan

Ketiga
Klik + Pilih

Silahkan Copy dan Paste Kode Berikut ini

<div class="wrapper1">

<div class="wrapper">

<div class="nav-wrapper">

<div class="nav-left"></div>

<div class="nav">

<ul id="navigation">

<li class="active">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Home</span>

<span class="menu-right"></span>

</a>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Blog</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Archives</a>

</li>

<li>

<a href="#">Categories</a>

</li>

<li>

<a href="#">Top-rated Posts</a>

</li>

<li>

<a href="#">Most-viewed Entries</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Development</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Wordpress Themes</a>

</li>

<li>

<a href="#">Wordpress Plugins</a>

</li>

<li>

<a href="#">Mac OS X</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Tutorials</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Photoshop</a>

</li>

<li>

<a href="#">Illustrator</a>

</li>

<li>

<a href="#">Css, Html</a>

</li>

<li>

<a href="#">Post Your Tutorial!</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Gallery</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Personal Photos</a>

</li>

<li>

<a href="#">My Friends</a>

</li>

<li>

<a href="#">Tech</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Portfolio</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">My Works</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="last">

<a href="">

<span class="menu-left"></span>

<span class="menu-mid">Contact</span>

<span class="menu-right"></span>

</a>

</li>

</ul>

</div>

<div class="nav-right"></div>

</div>

<div class="content">

<p> </p>

<p> </p>

</div>

<div class="content-bottom"></div>

</div>

</div>

Silahkan Sobat Ganti kode berikut dengan menu sesuai keinginan sobat, dan bisa juga ditambahkan atau dikurangi sesuai kebutuhan

<a href="#">Home</a>
<li><a href="#">Product</a>
dst

Kode # = Alamat Link dan Link One = Nama Link
contoh
Kode # saya ganti dengan http://www.zal-dblack-revan.com
Link One saya berikan nama = Home

Terakhir Jangan lupa letakkan atau Geret Gatget Tepat dibawah Header

Selamat mencoba dan semoga bermanfaat

Cara buat Drop Down menu Blue Dawn

[ BLOG ARCHIVE ]

[ Entri Populer ]