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

Membuat Menu Drop Down Purple Style di Blog

Menu Drop Down Purple Style di Blog
Membuat Menu Drop Down Purple Style di Blog – masih sama seperti pada tutorial yang sebelumnya, namun yang berbeda hanyalah tampilan warna tema pada menu dan sub menunya atau sering disebut drop down. Jika pada menu yang sebelumnya berwarna coklat caramel maka pada menu drop down purple style ini berwarna ungu. Akan sangat manis tentunya terlihat apabila jika diterapkan pada template blog yang juga menggunakan warna latar ungu. Maka kombinasi color yang sangat serasi dengan tema warna menu drop down ini lebih terlihat menyala. Blog tidak hanya sekedar memiliki menu, namun juga akan memiliki tampilan minimalis yang lebih membuat visitor mungkin akan klik menu-menu yang sudah anda tampilkan pada menu drop down tersebut. Sangat menarik bukan jika visitor blog anda juga merasa senang dengan keadaan yang nyaman, tentu hal tersebut akan membuat visitor untuk lebih tinggal berlama-lama di blog kesayangan anda tersebut. Bagaimana untuk membuat menu drop down ini supaya dapat terpasang di blog anda tersebut? Maka berikut adalah tutorial cara Membuat Menu Drop Down Purple Style di Blog dengan menggunakan kode CSS:

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 Purple 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:#fff;
    font-weight:bold;
    width:81px;
    height:42px;
    text-align:center;
    border-bottom: 0;
    background-image:url('http://1.bp.blogspot.com/-8NtbntWMmTU/UdDJo6o0xYI/AAAAAAAAFeQ/2LQEqWeTqmo/s82/center.png');
    line-height:48px;
    font-size:11px;
    overflow:hidden;
    padding-left: 1px;
}
.menu .left_nosub {
    background-image:url('http://3.bp.blogspot.com/-IiByf_5gevI/UdDJp4-XqmI/AAAAAAAAFeg/tigxcNAtTfQ/s82/left.png');
    padding-left: 1px;
    margin-right: -1px;
}
.menu .right_hassub {
    background-image:url('http://2.bp.blogspot.com/-DRN0wSB5YY8/UdDJqdOy4RI/AAAAAAAAFew/AaBpZ05Sqsk/s82/right.png');
}
.menu .right_nosub {
    background-image:url('http://2.bp.blogspot.com/-DRN0wSB5YY8/UdDJqdOy4RI/AAAAAAAAFew/AaBpZ05Sqsk/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:#200033;
background:url('http://1.bp.blogspot.com/-buYDleaujtE/UdDJo4wo3pI/AAAAAAAAFeA/Zm04UBlaP6g/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:#200033;
background:url('http://4.bp.blogspot.com/-nsX1ZGJPJic/UdDJqG1AdiI/AAAAAAAAFek/JmpQNgIwg8c/s82/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color:#200033;
background:url('http://3.bp.blogspot.com/-ySBik0Jqdn8/UdDJq9UZN4I/AAAAAAAAFe0/tQK7ei1HFJw/s82/right_hassub.png');
}
.menu ul li:hover .right_nosub {
color:#200033;
background:url('http://4.bp.blogspot.com/-NjBQ7ZGBGjE/UdDJrPDRIQI/AAAAAAAAFe8/vz99dDiyu7I/s82/right_nosub.png');
}
.menu ul li:hover ul li a {
background-image: none;
display:block;height: 28px;
line-height: 26px;
color:#200033;
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/-eOKqLt6q5I0/UdDJpoUuH_I/AAAAAAAAFeU/pSrkd-0mKoM/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/-sOUgFtcu_98/UdDJrfeahrI/AAAAAAAAFfM/9HeatZYlwgo/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/-2jeUz5w8UnE/UdDJr8xRpCI/AAAAAAAAFfI/iFB85k3t1x4/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 Purple 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 ubah tanda # dengan URL tujuan yang di inginkan.

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

Berlangganan artikel via email

33 Response to "Membuat Menu Drop Down Purple Style di Blog"

wah warna janda nih, tapi keren sob..
:)
cara bikin ginian pakai software apa mas?

Balas

nah sekarang beda lagi warnanya, ini lebih greng tampilan warnanya mas

Balas

Tutorialnya cocok banget dijadikan referensi ngeblog. Ngeblog memang bukan hanya sekedar posting. Tampilan juga penting diperhatikan supaya jadi lebih menarik. Terima kasih...

Balas

kalo urusan kodenya yang panjang panjang .. aku pending dulu dah haha.

Balas

keren mas...sama warna nya itu loh...
fenomenal...hehe :)

Balas

hehehehe,,,kenapa jadinya bahas janda jandaan Mas,,,Alhamdulillah saya juga sudah menggunakan Menu Dropdown pada template blog saya Sob...

Balas

Menu dropdown memang sangat praktis, selain menarik juga ringkes dan lebih mudah utk mencari menunya
terima kasih banyak sudah berbagi kawan

Balas

tuh sampe udah berubah warna, aku masih belum coba aja .
hihihi ..
mau yang pink dunk mas andes ;D

Balas

keren jg ni sob.. *smile

Balas

keren yaa gan sekarang ada yang warna ungu hehe

Balas

mantaaap kang menu drop down nya, aku copy dlu ah, siapa tau nanti bisa aku praktekan di blog aku hehehee... makasih kang :)

Balas

keren hasilnya..apalg klo disamping ditambah kotak search mas pasti lebih mantap.

Balas

adh ungu ya mas , padahal ping aja biar so sweet gitu hehe

Balas

wah keren nih cantik widget menunya mas, thank udah berbagi

Balas

Mampir belajar css sekaligus mengajak tukaran link

Balas

boleh juga nih karyanya abang hehehmantap dahh


koemn back yeee

Balas

kunjungan malam aja sob,,sambil nyimak

Balas

oke kawan,,,nice info..
kapan2 di praktekan..

Balas

keren dropdownnya mas

Balas

nyimak aja neh bang sambil jalan - jalan subuh di mari ..hehe sukses terus ya dan makasih sudah berbagi

Balas

kalau warna lainnya bisa gak gan

Balas

Sebenarnya saya pernah coba di blogku, tapi saya ga tau cara isi sub menunya.alamat urlnya diisi dengan apa?

Balas

Mantab mas, ntar bisa di coba di blog ane yang baru

Balas

waw keren sob, ijin boomrak dlu

Balas

boleh nie mas tutorialnya, kebetulan lagi mw edit menu navbar blogku, izin copas kodenya mas, terima kasih

Balas

Eng ing eng...mbak tepatnya...hehe :)

Balas

Hm, dicoba nanti..
Thanks..^^

Balas

kunjungan malam sob,,,keren nih sob tutornya

Balas

kunjungan malam sob,,,keren nih sob tutornya

Balas

mantap gan..berkunjung balik yah
http://andilutfihidayat.blogspot.com/

Balas
avatar
Anonymous

langsung ke tkp gan

Balas

ga bisa masuk sob malah eror templatenya

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