MAKALAH GRATIS: 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/AVvXsEh1NXeMm-tyoHW0KKqAVUE97bd5f7HRrZCEklR1-A67s-UIRJ5HIzBb0kANyFl7xW537CN9v35bhQKEVdsg6snnlbzQikmSQZw-3C9XYbiicYbLlikjF2wEKCBu1Wf9NUlBBGQiP6dF6Go/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/AVvXsEjJLSeMvciYNadKm3AiOudV94EaI1dFTat_0Oe-XMOJHymuEjbK4TPf-pCXGdFwrLx6nR7scqgK6vPv29qswASZ6gHr2PVTlFkaKwjBApBrnHTjN7yUIfUycf9zLiXzTGmlTZ_0sPvZKoE/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/AVvXsEgEZYOORiQLqGCpgBVe6VeZFL0-AX2uM6YFKXVBcHKN8UIbqrmFiIaV53cbe0Dk_UgWOmrkAf3vw4N_O-tN8lWaamE8XX1vMUA5kVap6mnmoBbWGqRbOBWnOLbdgtlh_LSNT1ijBePZWMY/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/AVvXsEjV2RwNoZHfSRkdN0FDOSRN63pCj8wFCnJ8UTqSWdraq2rdI33b1xxyvGKrs0wyeNEpsh4lQQJXjQ9MIimqweoK4i0WlnJcqtk6Kcm4h5H0yN3ENPbRdnByVi4tvRsyu1Nfq9tWJi1upV4/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/AVvXsEhgQIY51CJ-0uF7v69JMJ-wCesQ6mD8001uK2hs88gwUeHLCRQTpzH0__bCKW2m6jAJXDkjJwANMendxAtnmU8zaj4q46IDWpp5pmugDHbLqldrpy-J58iQKZh_p5sVOi4VdWy_802VpEw/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/AVvXsEiz_SqI4K2kP4tvx3psaYtWqL3EHgkHJ-NQCeapCeoAbyYlwTN-5yQu1txSP8m3wAAYTFBCLrDqEVNLehe37xhX8LoyPYceWp4vEoiT0lSQzSlTs-LjNPzXQbgRjceMojKdkBFC5gh4Rb0/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/AVvXsEhKwYxOLGsy6scWhlzFq9YosxAAIG9EhzCs5q1xzyynK4JjWXvlMeuNh2mE93kR_MfzF-ICguHtaQUhB6uQbph90duSpf9AYZpG5sB535ItOxJu3iEJ6PZXzJRpvr76YFj5-xv_efe4Mn0/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/AVvXsEiY3ZlYqJOepTuq48RIMavzXgbX4HiRhYa0uOFRxM-rBF3ED8XZaSWwVUq4NFCx9mbVvl-qxLfRxRDRVxekGpj1sLqFJiOHr-Wi-NH3j3dnFOMG-6xrjz4rb6azbzdMFLF2kImwXalBDYc/s144/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXUXHZW-6QtJrEJWW8UPKLsZD8oNMCCDU-9Jx10Gnd9MCPr8RfJEF_hBF_gXumFGDdRhAfGZEKAILWesJTAjdd8Sjmu4WDcoN3hHOpMdBOrV8ODWrUs9fkqm61jUonqAG4_UwUdKEjdVkh/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/AVvXsEh2J-Tnju3yvfP0Emm3aUF8GZazceNKyZijNHe9ClcQgZeRbPIVX8cYOO90TvgsHj7JE01d9K1a4GS-pJHgTLhuVMUVGfbN3COAPuejVnffj-BQ8RFZoTv3NRd-PNNm2jPKKsxEsN-57bMS/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/AVvXsEiKViZ10qiafjto3AVtgoxZJpwNU2FA3J3bLPBdzthd9l_eQHuw-wVTMg8Y7JJMfjRF9TzJ_DikIigJC2auEQxQtDGpDId_HUh-q4HWruiWilLBlTUqLsE6Bf8jrW4JJ-sY5v10m3ACjJ-H/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/AVvXsEjT2f5IwKV_2iF88pE1UqSCCYi5Qz-kbxg7EGJSTI2RmZEYurqg4kQd_IIN5wpGWY1t-QVZtqsj0pES5jXmGc5gNbShnTTjQcBC91aNZEFmHEgSqJq2Y8S77KxpSP5p5ZwGRXvI096FJ_At/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.kumpulancara.com

Link One saya berikan nama = Home

Terakhir Jangan lupa letakkan atau Geret Gatget Tepat dibawah Header

Selamat mencoba dan semoga bermanfaat

MAKALAH GRATIS

Cara buat Drop Down menu Blue Dawn

No comments:

Post a Comment