Cara Ampuh Membuat Menu Dropdown Responsive dan Valid di Blog + Search Box

Langkah Membuat Menu Dropdown Responsive dan Valid di Blog + Search Box - Tahukah anda bahwa menu naviagasi yang tepasang di blog anda merupakan salah satu hal untuk membuat blog anda menjadi user seo friendly karena dengan terpasang menu dropdown di blog dapat meningkatkan jumlah pagviews anda lebih banya dua kali lipat dibanding UV atau unik Visitor . Kalau nggak percaya silahkan lihat statistik blog saya melalui histats

Oh iya , navigasi menu dropdown kali ini berbeda dengan yang lainya , karena telah di modifikasi dan ditambahi fitur responsive untuk menyesuaikan trend dan perkembangan zaman saat ini , serta ditambahi kotak pencarian untuk mempermudah pengunjung mencari artikel menarik & unik lainya yang ada di blog Kalian.

Untuk hasilnya nanti , kurang lebih jadiya akan seperti gambar dibawah ini .

Langkah Membuat Menu Dropdown Responsive + Kotak Pencarian di Blog

1. Pertama , silahkan sobat masuk ke dasbhor blog sobat terlebih dahulu

Note : saya sarankan ketika kalian melakukan tutorial diatas Backuplah template terlebih dahulu jangan, nanti kalau kalian kurang tepat malah jadi kacau deh templatenya.

2. Masuk ke bagian Temlate => Edit Html 

3. Kemudian Salin dan letakkan kode berikut tepat di atas ]]</b:skin>

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}

4. Supaya menu tersebut dapat berubah  responsive, maka kita harus menambahkan media query ke template anda. Terdapat 2 media query, yaitu pada ukuran 600px dan 380px. Letakkan media query ini sesuai dengan media query yang ada di template anda. Atau letakkan bisa letakkan kode berikut tepat di atas ]]</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}}}

5. Kemudian letakkan kode berikut suka-suka anda, kalau saya meletakannya di bawah 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>

6. Yang Terkhir Silahkan Simpan Template dan Lihat perubahanya.

Gimana menarik bukan? hehe sekian artikel kali ini saya ucapkan kepada kalian para visitor blog ini  ~selamat mencoba~ jika masih belum bisa atau ada yang ingin di tanyakan, tanyakan lah pada kolom komentar, dengan kata-kata yang sopan tentunya.

Unknown August 15, 2017 - tanpa komentar

Bagikan