Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Menu Drop Down Green Style CSS3 di Blog

Menu Drop Down Green Style CSS3 di Blog
Membuat Menu Drop Down Green Style CSS3 di Blog – ini merupakan menu drop down CSS yang mempunyai style sama persis dengan menu drop down pada tutorial yang sudah saya share sebelumnya. Seluruh efek maupun bentuk sama persis dengan yang sudah ada sebelumnya. Hanya saja tampilan tema warna yang berbeda pada menu drop down green style ini dengan menu drop down brown style maupun menu drop down purple style. Mungkin ini terlalu bertele-tele untuk karena fitur yang sama namun terposting pada artikel yang berbeda. Hal ini karena jika saya posting sekaligus dengan menampilkan enam menu dengan tema yang berbeda maka sangat banyak langkah untuk saya pada saat membuat tutorial. Jadi untuk menghindari hal ini terjadi saya ambil singkatnya saja. Selain itu, jika pada satu konten namun terlalu banyak kode script juga tentunya malah membingungkan visitor untuk mencerna alur dari tutorial konten tersebut. Maka alangkah baiknya jika saya posting tutorial menu drop down ini satu per satu walaupun masih satu jenis menu yang sama. Supaya untuk lebih mudah menerapkannya, maka berikut adalah tutorial cara Membuat Menu Drop Down Green Style CSS3 di Blog:

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).
Menu Drop Down Green Style CSS3 di Blog
.menu {
font-family: "Verdana", Arial, san-serif;
width:auto;
height:42px;
position:relative;
font-size:11px;
margin: 0;
}
.menu ul li a {
display:block;
text-decoration:none;
color:#fff;
font-weight:bold;
width:81px;
height:42px;
text-align:center;
border-bottom: 0;
background-image:url('http://3.bp.blogspot.com/-bGtbI5FHlTs/UdDNg1c6pYI/AAAAAAAAFiQ/yKTb9DEHM_M/s82/center.png');
line-height:48px;
font-size:11px;
overflow:hidden;
padding-left: 1px;
}
.menu .left_nosub {
background-image:url('http://2.bp.blogspot.com/-KCyaVqY6fAU/UdDNhkAHa5I/AAAAAAAAFig/DXMaVDqTRZk/s82/left.png');
padding-left: 1px;
margin-right: -1px;
}
.menu .right_hassub {
background-image:url('http://2.bp.blogspot.com/-_aWG7o_2igk/UdDNiS1qSII/AAAAAAAAFiw/tM3InXnjsXk/s82/right.png');
}
.menu .right_nosub {
background-image:url('http://2.bp.blogspot.com/-_aWG7o_2igk/UdDNiS1qSII/AAAAAAAAFiw/tM3InXnjsXk/s82/right.png');
}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a {
color:#223601;
background:url('http://3.bp.blogspot.com/-r-BFXmjrO28/UdDNg1U72GI/AAAAAAAAFik/4vGNDdu6vTE/s82/center_hassub.png');
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:42px;
left:0;
width:152px;
margin: 0;
padding: 0;
}
.menu ul li:hover ul li a.center_hassub {
background:#6a3;
color:#fff;
}
.menu ul li:hover ul li:hover a.center_hassub {
background:#6fc;
color:#544a3a;
}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover .left_nosub {
color:#223601;
background:url('http://3.bp.blogspot.com/-yrNWGHgCugE/UdDNh5qpEpI/AAAAAAAAFi4/Uqmb8D6StGc/s82/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color:#223601;
background:url('http://3.bp.blogspot.com/-Id9VllNuDZY/UdDNieT5MdI/AAAAAAAAFi0/UASQowupErQ/s82/right_hassub.png');
}
.menu ul li:hover .right_nosub {
color:#223601;
background:url('http://1.bp.blogspot.com/-Y6CYfHyY0gE/UdDNjF3nGfI/AAAAAAAAFjI/ukuWu4Uxybc/s82/right_nosub.png');
}
.menu ul li:hover ul li a {
background-image: none;
display:block;
height: 28px;
line-height: 26px;
color:#223601;
width:142px;
text-align:left;
margin: 0;
padding:0 0 0 11px;
font-weight:normal;
}
.menu ul li:hover ul {
margin: 0 0 0 3px;
padding: 0;
background-image:url('http://3.bp.blogspot.com/-7s5F4WPCWDM/UdDNgyK3YsI/AAAAAAAAFiU/VUe91X-Ecgc/s202/dropdown.png');
background-repeat:no-repeat;
background-position:bottom left;
}
.menu ul li:hover ul .sub_active {
background-image:url('http://2.bp.blogspot.com/-MNgOP1pzzNM/UdDNjFYqV4I/AAAAAAAAFjY/sdtzqs_ENMk/s152/sub_active.png');
margin-right: 1px;
}
.menu ul li:hover ul li a:hover {
color:#fff;
background-image:url('http://2.bp.blogspot.com/-0H7tFCWoLUA/UdDNjdXQN6I/AAAAAAAAFjM/17zFTx8Yal0/s152/sub_hover.png');
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:105px;
top:0;
}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Selanjutnya untuk memanggil dan menampilkan Menu Drop Down Green Style CSS3 di Blog caranya copy kode HTML dibawah ini, kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode ini didalamnya:
<div class="menu">
<ul>
<li><a class="left_nosub" href="#">Home</a></li>
<li><a class="center_hassub" href="#">Tutorial</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li><a class="center_hassub" href="#">Designs</a>
<ul>
<li><a href="#">Website Designs</a></li>
<li><a href="#">Logo Designs</a></li>
<li><a href="#">Banner Designs</a></li>
<li><a href="#">Print Designs</a></li>
<li class="sub_active"><a href="#" style="color: rgb(255, 255, 255);">Request Custom Design</a></li>
</ul>
</li>
<li><a class="center_hassub" href="#">Download</a>
<ul>
<li><a href="#">Ebook</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Film</a></li>
</ul>
</li>
<li><a class="center_hassub" href="#">Tips Trik</a>
<ul>
<li><a href="#">Blogger</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Computer</a></li>
</ul>
</li>
<li><a class="right_nosub" href="#">Contact</a></li>
</ul>
</div>
Keterangan:
Silahkan ubah tanda # dengan URL tujuan yang di inginkan.

Langkah terakhir klik Simpan, maka selesai dan silahkan lihat hasilnya dari cara Membuat Menu Drop Down Green Style CSS3 di Blog.

Berlangganan artikel via email

20 Response to "Membuat Menu Drop Down Green Style CSS3 di Blog"

wah, bole nh lur..
mantep,, kapan2 saya copy dech yah.. hehehe..

Balas

nice post,,,,
bermanfaat ne,,,,

makasih tas sumbangan ilmu.a sob,,,,

Balas

yang pink mana mas ? hehhe

Balas

wah mantap ni tutor, thank mas sudah berbagi

Balas

sepertinya mas andes memanjakan para blogger yg suka otak atik template khususnya menu navigasi. keren mas.....mudah2an jadi ladang pahala :D

Balas

sabar mbak ini ngabisin posting yang udah terjadwal minggu ini, soalnya saya gak tiap hari update postingan mbak. updatenya seminggu sekali tapi udah saya jadwal buat seminggu.
hehehe.. minggu depan ntar edisi pink style mbak

Balas

sippp tankyu kunjungannya

Balas

terimakasih mas alex kunjungannya

Balas

aminn.. yes dapet doa.
mbak indah pinter banget kalo muji orang nih.
hohoho

Balas

Postingan yg berguna sobat, ternyata banyak cara untuk membuat menu dropdown, senang rasanya bisa belajar CSS disini
terima kasih atas tutorialnya sobat dan terima kasih banyak sudah berbagi

Balas

ckckck.... masnya ini hebat bener soal css3...saya masih belum mudeng nih mas...takut belajarnya kali ya...hehe

Balas

keren juga menu dropdownnya...thanks dah berbagi..

Balas

Siang Mas andes, kira2 ada gak ya tutorial dari ams andes tentang gambar bergeraknya seperti pada postingan ini?
Kalau ada, boleh tuh dishare.

Balas

pakenya photosop mas, langkahnya sama kayak ini:
http://mas-andes.blogspot.com/2013/04/membuat-animasi-foto-slide-show-dengan.html

Balas

hadir di sore hari ms andes apakabar :)

Balas

sip sob menunya .. nanti dicicipi hehe

Balas

mantap nih blog, saya juga pasang style menu yang sama, memang asyik menunya. Sukses selalu untuk sobat yang telah share cara membuat dropdown menu.
Salam blogger.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Menu Drop Down Green Style CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode