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

Membuat Menu Drop Down Brown Style di Blog

Menu Drop Down Brown Style di Blog
Membuat Menu Drop Down Brown Style di Blog – masih melanjutkan tentang tutorial membuat menu pada blog, sebagai intermezzo kemarin sudah saya posting tentang cara membuat gallery photo efek polaroid di blog dan sekarang kita mulai lagi dengan pembahasan mengenai tutorial cara membuat menu drop down. Drop down menu brown style ini bagi yang menggunakan template blog dengan tema warna yang terang mungkin akan kurang sesuai dengan warna dasarnya,  akan tetapi tidak ada salahnya jika ingin mencoba apabila mau menerapkannya terlebih dahulu. Tampilan yang minimalis tidak membuat menu ini terlihat rumit, tampilan drop down dengan sub menu yang rapi maka akan tampak pula mempercantik blog. Untuk lebih lanjut lagi, maka berikut adalah tutorial tentang cara Membuat Menu Drop Down Brown Style di Blog dengan cara pemasangan yang mudah:

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 Brown Style 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:#EBE0D5;
font-weight:bold;
width:81px;
height:42px;
text-align:center;
border-bottom: 0;
background-image:url('http://2.bp.blogspot.com/--APJWn9e6-I/UdDK_xxD_fI/AAAAAAAAFfs/67KH-0QEwyY/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/-B7gPqGOQUW8/UdDLAvZ5xTI/AAAAAAAAFfw/rpOzDzhErpQ/s82/left.png');
padding-left: 1px;
margin-right: -1px;
}
.menu .right_hassub {
background-image:url('http://3.bp.blogspot.com/-jxfzpX4Bfv8/UdDLBXosxOI/AAAAAAAAFgA/VMmu0vaT3MY/s82/right.png');
}
.menu .right_nosub {
background-image:url('http://3.bp.blogspot.com/-jxfzpX4Bfv8/UdDLBXosxOI/AAAAAAAAFgA/VMmu0vaT3MY/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:#381B01;
background:url('http://1.bp.blogspot.com/-GVhO1kf-dMs/UdDK_8AGp2I/AAAAAAAAFfg/tuEI3jV5-Oo/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:#EBE0D5;
}
.menu ul li:hover ul li:hover a.center_hassub {
background:#6fc;
color:#381B01;
}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover .left_nosub {
color:#381B01;
background:url('http://2.bp.blogspot.com/-0f4ifKJ90Sk/UdDLBNRaYTI/AAAAAAAAFgQ/A4jiVrASe4A/s82/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color:#381B01;
background:url('http://3.bp.blogspot.com/-a3VkZDW4UR4/UdDLB_IuXvI/AAAAAAAAFgM/FziDQSHLgtQ/s82/right_hassub.png');
}
.menu ul li:hover .right_nosub {
color:#381B01;
background:url('http://3.bp.blogspot.com/-FBy198NVbgY/UdDLCVhSoJI/AAAAAAAAFgc/piZTRPmenpI/s82/right_nosub.png');
}
.menu ul li:hover ul li a {
background-image: none;
display:block;
height: 28px;
line-height: 26px;
color:#381B01;
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://1.bp.blogspot.com/-wJDh6mVT4Hg/UdDLAmFqxwI/AAAAAAAAFf8/VjiNFj0mvO0/s202/dropdown.png');
background-repeat:no-repeat;
background-position:bottom left;
}
.menu ul li:hover ul .sub_active {
background-image:url('http://1.bp.blogspot.com/-Ox79sT3yYTw/UdDLCxYNTBI/AAAAAAAAFgg/mt0rdE3cjos/s152/sub_active.png');
margin-right: 1px;
}
.menu ul li:hover ul li a:hover {
color:#381B01 !important;
background-image:url('http://2.bp.blogspot.com/-w1dzHdGidBA/UdDLC97lQvI/AAAAAAAAFgs/5zrQR6I6Syw/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 Brown Style 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 ganti tanda # dengan URL tujuan yang di inginkan.

Langkah terakhir klik Save, maka selesai sudah dan silahkan lihat hasilnya dari tutorial cara Membuat Menu Drop Down Brown Style di Blog.

Berlangganan artikel via email

26 Response to "Membuat Menu Drop Down Brown Style di Blog"

Ada award buat anda silahkan diambil

Balas

saya sangat menyukai yang namanya CSS mas, tampilannya keren, elegan dan mantap dipandang mata

Balas

Bener Mas, CSS juga ringan kinerjanya :D

Balas

Wahhh.. saya sering pening pas buat yg beginian..

Balas

Sungguh luar biasa dan tampilan gambarnya di atas memang mantap.
Tutorial yg perlu dan sangat berguna,ini saya save dulu sobat suatu saat mungkin digunakan jika diperlukan.
terima kasih banyak sudah berbagi sobat

Balas

ini sama yg tempo hari yah? cuma warnanya beda

Balas

Mantabsss..............

Balas

Terimakasih sudah berbagi sobat !!

happy blogwalking sobat, MAMPIR SILATURAHMI, HEHEHEHE!!

Balas

terimakasih nih mas , bermanfaat bangeett nih ..

Balas

Kren mas tutorialnya, terimakasih banyak sudah berbagi, maaf baru bisa mampir lagi.

Balas

wah keren nih drop downnya sob,,,makasih sudah berbagi

Balas

mantap sobat, langsung coba nih sob

Balas

mas andes mah emng udah pakar yang beginian deh,
tapi sayangnya aku ga pernah bisa nyoba . hahahah *tragiz

Balas

keren mas...boleh di coba nih :)

Balas

Terima kasih Mas sharenya, keren nih, Oiya follow 68 sukses

Balas

Saya amankan dulu kodenya, kapan2 saya coba :D
Makasih tutorialnya mas :)

Balas

kasih jempol deh buat mas andes soal desain blog

Balas

Ane mau nyoba dulu nih gan, thanks yaa :)

Balas

keren sobat,,tapi punya saya sudah ngikut dengan mas kolis si pembuat template,,heheee

Balas

keren mas, ijin bookmark.

Balas

makasih sobat, betulan keren menu dropnya

Balas

keren abis sob menu dropdown-nya makasih sidah share

Balas

tutorialnya sih bagus nih gan,,,
cuma nggak cocok sama blog ane dah ane coba :D
hihihi

Balas

wah mantap mas.. mas andes memang top spesialis css

Balas

Cara biar ganti warna teks di menunya gimana yah?

Balas

ubah pada color:#EBE0D5;

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