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

Membuat Menu Drop Down Blue Style CSS3 di Blog

Menu Drop Down Blue Style CSS3 di Blog
Membuat Menu Drop Down Blue Style CSS3 di Blog – mungkin jika seluruh background dari menu drop down ini hanya menggunakan kode CSS dan tidak memerlukan background dengan format gambar, tentu saya tidak akan share menu ini pada url halaman posting yang berbeda. Hanya saja setiap background dari masing-masing menu ini berbeda dan itupun menggunakan format gambar, tidak menggunakan background menu atau warna dasar warna dasar yang memakai warna heksa. Jadi akan terlalu susah dan rumit untuk membagikan tutorial menu ini didalam satu postingan dengan menu drop down yang masih satu style dengan menu ini apabila dilakukan dengan sekali tutorial posting. Apalagi jika visitor dalam istilahnya masih awam tentu akan merumitkan dalam pemahaman konten maupun cara penerapannya saat ingin mencoba kedalam blog masing-masing. Seperti yang sudah terlihat pada gambar diatas, menu ini berwarna dark blues atau bisa dikatan biru tua yakni warna biru kehitam-hitaman yang tentunya sangat kontras apalagi jika diterapkan kedalam blog yang sudah menggunakan warna biru sebagai warna latar default template. Tentu tidak perlu banyak merubah kode warna untuk menyesuaikan maka secara langsung apabila menu ini sudah terpasang makan akan dengan sendirinya sudah terlihat manis menghias blog anda. Untuk pemasangannya kedalam blog, maka berikut adalah tutorial cara Membuat Menu Drop Down Blue 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 Blue 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/-iyGI8nLBYVk/UdDMfb9d8RI/AAAAAAAAFhI/qVIQKC3jkJ4/s82/center.png');
line-height:48px;
font-size:11px;
overflow:hidden;
padding-left: 1px;
}
.menu .left_nosub {
background-image:url('http://1.bp.blogspot.com/-shKiSYnBP6s/UdDMgGVHgWI/AAAAAAAAFhY/kUxR5D6Ou7Q/s82/left.png');
padding-left: 1px;
margin-right: -1px;
}
.menu .right_hassub {
background-image:url('http://3.bp.blogspot.com/-DASl0bLH3ho/UdDMgouY5JI/AAAAAAAAFhg/o6QKrZuO3N4/s82/right.png');
}
.menu .right_nosub {
background-image:url(http://3.bp.blogspot.com/-DASl0bLH3ho/UdDMgouY5JI/AAAAAAAAFhg/o6QKrZuO3N4/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:#043454;
background:url('http://4.bp.blogspot.com/-d8Yj8U-em1c/UdDMfdlS3hI/AAAAAAAAFg8/AJZtj15xXtA/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:#043454;
background:url('http://3.bp.blogspot.com/-QMVBV5H2oo4/UdDMgYtB-_I/AAAAAAAAFhU/yepYq9eZHq8/s82/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color:#043454;
background:url('http://2.bp.blogspot.com/-K4hDDXqaZSc/UdDMhFkClMI/AAAAAAAAFiA/zmghEivQB0Q/s82/right_hassub.png');
}
.menu ul li:hover .right_nosub {
color:#043454;
background:url('http://4.bp.blogspot.com/-qRTCwiEyTZ8/UdDMhYhBlTI/AAAAAAAAFho/-EIzPEjVGB8/s82/right_nosub.png');
}
.menu ul li:hover ul li a {
background-image: none;
display:block;
height: 28px;
line-height: 26px;
color:#043454;
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://4.bp.blogspot.com/-ZMrdPzIfthk/UdDMfd4RG_I/AAAAAAAAFhA/8yC-t6HYlqY/s202/dropdown.png');
background-repeat:no-repeat;
background-position:bottom left;
}
.menu ul li:hover ul .sub_active {
background-image:url('http://3.bp.blogspot.com/-TO7hnMKWqvQ/UdDMhnw6J1I/AAAAAAAAFh0/MrqNXE9-2no/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/-AofvVzYS6_A/UdDMh31X9VI/AAAAAAAAFh4/GeRVbK-PymQ/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 Blue 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 halaman yang di inginkan.

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

Berlangganan artikel via email

15 Response to "Membuat Menu Drop Down Blue Style CSS3 di Blog"

Manteb mas menunya cssnya, makasih sharenya

Balas

wah kren...
emang mntap2 abis dah tutorialnya...

Balas

wah.. CSSnya siap di amankan mas... makasih
jangan lupa mampir..

Balas

sangat mantap ini sobat, suatu saat bisa juga digunakan tutorialnya nih, syukur alhamdulillah saya jadi tambah tahu dan bisa menambah pengetahuan tentang cara Membuat Menu Drop Down Blue Style CSS3.
Terima kasih banyak sobat sudah berbagi tutorialnya

Balas

keren gan menu dropdown nya, ini lebar tiap sub menu nya fixed ya gan?
btw, kunjungan siang gan...

Balas

mas andes paling suka bikin menu ..... sekali2 bikin template mas

Balas

makin keren aja mas tutornya..selamat sore n met beraktivitas

Balas

Nah nie dia yang ane cari-cari...keren banget mas bro...
kalo gini caranya ane harus rajin berkunjunga keisni nie....
terimakasih sobat udah share infonya Insya Allah bermanfaat terlebih buat blogger pemula seperti ane yg baru kemaren sore kenal dunia blog.

Balas

wah kayaknya cocok nih buat blog saya,blue style kesukaan saya neh,ijin mencoba kang bro,,,,,

Balas

banyak pilihan disini jika ingin menggunakan dropdown menu. Pilihannya variatif dan tentu saja sangat atraktif. :)

Balas

keren bang menu navigationnya


Kunjungan Malam Sobat, Kunjungan Balik nya Saya Tunggu ya... :D

Balas

wah, keren kang menu drop downnya ... :)

Balas
avatar
Anonymous

ada live demonya gak sob??

komen balik ya :)

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 Blue Style CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode