Bentuk dropdown yang akan saya jelaskan sekarang adalah menu dropdown yang sudah dimodifikasi sedemikian rupa sehingga menjadi responsive dan ditambah kotak pencarian untuk mempermudah pengunjung mencari artikel pada blog anda.
Cara Membuat Menu Dropdown Responsive dan kotak pencarian di Blog
1. Masuklah ke dashbor blogger anda2. Pilih Blog yang akan anda gunakan
3. Pilih "Template" kemudian "Edit HTML"
4. Salin dan letakan kode berikut tepat diatas ]]</b:skin> atau ]]></b:skin>, anda bis mempercepat pencarian menggunakan Ctrl + F
nav{text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;background:#e74c3c}nav *{margin:0 0 0 0;padding:0 0 0 0;list-style:none}nav ul{overflow:hidden;background:rgba(231,76,60,0.84);float:left}nav li{float:left;display:inline}nav li a{padding:3px 15px;line-height:40px;color:#fff!important;display:block;text-decoration:none}nav li a:hover{background:rgba(231,76,60,0.84)!important}nav li ul{display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s}nav li li{display:block;float:none;width:100%}nav li:hover > ul{visibility:visible;width:200px;opacity:1}nav li li ul{left:200px;margin-top:-40px}nav li.sub > a{position:relative;padding-right:30px}nav li.sub > a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px}nav li.sub li.sub > a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px}5. Untuk bisa menjadikannya responsive , anda harus menambahkan media query kedalam template anda . ada terdapat dua media query yaitu pada ukuran 600px dan 380px. Letakanlah media query ini sesuai dengan media query yang ada pada template anda .anda bisa meletakan kode berikut tepat diatas ]]</b:skin> atau ]]></b:skin>
@media screen and (max-width:600px){#nav2{display:inherit;margin:5px;float:left;padding:8px}nav ul{display:none}} @media screen and (max-width:380px){#nav2{padding:3px}#search-top{padding:5px}input[type="text"]{padding:5px;width:90px}#search-button-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;transition:all 0.7s ease 0s;height:26px;width:29px;background-color:#34495e;background-position:7px -247px;border:none;float:right;cursor:pointer}}}6. Letakanlah kode berikut sesuai yang anda inginkan , ini adalah kode dimana menu dropdown akan ditampilkan . saya akan meletakannya dibawah Header
<nav><ul><li><a href="/search/label/Tutorial">Tutorial</a></li><li class="sub"><a href="/search/label/Template">Template</a><ul><li><a href="/search/label/CSS3">CSS3</a></li><li><a href="/search/label/HTML5">HTML5</a></li><li><a href="/search/label/Responsive">Responsive</a></li><li><a href="/search/label/SEO">SEO</a></li></ul></li></ul><select class="nav2" id="nav2" onchange="document.location.href=this.options[this.selectedIndex].value;"><option value="/">Home</option><option value="/search/label/Tutorial">Tutorial</option><option value="/search/label/Template">Template</option><option value="/search/label/CSS3">- CSS3</option><option value="/search/label/HTML5">- HTML5</option><option value="/search/label/Responsive">- Responsive</option><option value="/search/label/SEO">- SEO</option></select><form action="/search" id="search-top" method="get"><input name="q" placeholder="Search..." type="text"/><input id="search-button-top" type="submit" value=""/></form></nav>7. Pilih "Simpan Template" untuk menyimpan perubahan
8. Selesai
Selamat akhirnya menu dropdown responsive yang anda impikan tercapai. semoga dengan merubah menu dropdown responsive ini anda akan lebih bersemangat lagi dalam berkarya membuat artikel dan blog anda menjadi ramai pengunjung .
Demikian artikel tentang Cara Membuat Menu Dropdown Responsive di bawah Header
Semoga bermanfaat . jangan lupa untuk share
Terimakasih :)
