Cara Membuat Menu Dropdown Di Blog

Kembali lagi di ViperGoy Blog. Pada kali ini saya akan membahas tentang Cara Membuat Menu Dropdown Di Blog. Setelah artikel Cara Membuat Menu Di Blog, yang tanpa Efek Dropdown atau menu yang jatuh kebawah, kali ini saya akan membahas Cara Membuat Menu Dropdown Di Blog Dengan CSS. Jika anda melihat hasil pencaharian dengan " Cara Membuat Menu Dropdown Di Blog Tanpa Edit HTML " itu sama tidak akan membuat Menu - Menu Blog anda terindeks oleh Google. Tapi itu tergantung selera saja, saya hanya mengajarkan yang baik bagi saya sendiri saja. Oke lanjut.

Kode CSS Menu Dropdown ini sama seperti Menu Template Zikazev Blue dari Kang Ismet dengan beberapa pengeditan. Semoga Kang Ismet dan Para Fansnya bisa mengerti dan Tidak Demo disini. Hehehe.. Oke langsung saja ya. Cekidott......

Cara Membuat Menu Bar Dropdown CSS Pada Blog :

1. Buka Blogger Home kalian.
2. Kemudian pilih Template » Edit HTML.
3. Lalu Cari Kode <b:skin><![CDATA[/*
4. Kemudian Copy Kode dibawah ini dan Paste di BAWAH kode <b:skin><![CDATA[/*

#menu{background:#444;border:1px solid #222;color:#fff;height:42px;font-family:'Oswald', Arial, sans-serif;width:970px;margin:0 auto;}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:42px;width:980px}
#menu li{float:left;display:inline;position:relative;font:bold 14px Arial;text-transform:uppercase;font-weight:normal}
#menu a{display:block;line-height:42px;padding:0 14px;text-decoration:none;color:#fff;font-family:'Oswald', Arial, sans-serif;text-shadow: 0 -1px 0 #222;}
#menu li a{border-right:1px solid #222;}
#menu li a:hover {color:#fff;background-color:#222;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#fff}
#menu label span{font:normal 14px Oswald;position:absolute;left:35px;}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#444;border-top:1px solid #222;border-left:1px solid #000;border-bottom:1px solid #000;position:absolute;z-index:99;display:none;left:-1px;}
#menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#fff;text-transform:uppercase}
#menu li:hover ul.menus{display:block}
#menu a.dropdown{padding:0 27px 0 14px}
#menu a.dropdown::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#f0f0f0 transparent transparent transparent;position:absolute;top:16px;right:9px}
#menu ul.menus a:hover{background:#222;color:#fff}

5. Kemudian Copy Kode HTML dibawah Kode <div id='header-wrapper'>

<nav id='menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Disclaimer</a></li>
<li><a class='dropdown'>Contact</a>
<ul class='menus'>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Pinterest</a></li>
</ul>
</li>
<li><a href='http://vipergoy.blogspot.com/'>ViperGoy Blog</a></li>
</ul>
</nav>

Keterangan :
Untuk Membuat Menu Baru :
<li><a href='URL-HALAMAN'>TEXT</a></li>

Untuk Membuat Menu Dropdown :
<ul class='menus'>
<li><a href='URL-HALAMAN'>TEXT</a></li>
<li><a href='URL-HALAMAN'>TEXT</a></li>
</ul>
</li>

6. Kemudian Save / Simpan.

Beberapa dari kalian memang agak sulit untuk mengubah ini, tetapi saya bisa membantu anda bagi yang belum bisa dengan cara Message Facebook saya yang ada di bawah / footer blog ini.

Bagaimana Panduan Membuat Menu Dropdown Pada Blog ini ? Cukup menarik dan mudah bukan ? Setelah Membuat Menu Blog jangan lupakan untuk membaca Tutorial Blogger lainnya seperti
Cara Mengetahui Harga Blog
Cara Membuat Scroll Pada Widget Blog
Cara Mengganti Background Blog
Serta untuk tidak ketinggalan dengan Koleksi Template Blog Keren yang saya punya.

Oke, Sekian dari Paman ViperGoy untuk artikel yang berjudul Cara Membuat Menu Horizontal Di Blog Dengan Mudah. Semoga anda dapat mendapatkan Pemecahan Masalah bagi Blog anda. Terima Kasih semua.

Judul: Cara Membuat Menu Dropdown Di Blog
Rating: 10 out of 10 based on 24 ratings. 5 user reviews.
Ditulis Oleh Felix

Terima Kasih Atas Kunjungan Anda...

ViperShare :