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 meni 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 meanrik unik lainya yang ada di blog sobat.
Bentuk penampakan menu dropdownnya seperti apa mas ? untuk hasilnya nanti , kurang lebih jadiya akan seperti gambar dibawah ini . Gimana keren bangetss bukan ?
Langkah Membuat Menu Dropdown Responsive + Kotak Pencarian di Blog
- Pertama , silahkan sobat masuk ke dasbhor blog sobat terlebih dahulu
- Masuk ke bagian Temlate => Edit Html
- 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}
-
Supaya menu tersebut dapat berubah
power rangers 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}}}
- 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>
- Yang Terkhir Silahkan Simpan Template dan Lihat perubahanya
Taraaa Menu Dropdown Responsive di Blog di bawah header kini sudah terpasang di blog sobat , oh iya saya sarankan ketika sobat melakukan tutorial diatas gunakanlah blog demo terlebih dahulu jangan blog utama , nanti kalau sobat kurang tepat malah jadi kacau deh template blog utama , kalau di blog demo udah berhasil kemudian baru di blog utama , sekian tutorial membuat dan memasang menu dropdowns di blog yang keren dan responsive , semoga bermanfaat bagi anda
10 Komen Cara Membuat Menu Dropdown Responsive di Blog Keren Banget
ga bisa di copas scriptnya...
bisa kok, aku udah coba di blog demo. cuman belum pasang di blog utama karena masih bingung ngeditnya
Benar tuh kata mas rughy, scriptnya bisa di copas, yang nggak bisa itu tulisannya
wah infonya keren bange :) musti d coba :D
mas yadi mau nanya nih, saya bingung apa bedanya antara menu dropdown atau menu daftar isi sitemap atau menu kategori/label..???
intinya kalo ingin pasang menu navigasi agar memudahkan pembaca melihat isi blog itu paling bagus efektif pake yang mana? daftar isi sitemap atau menu dropdown itu.. makasih
mantap.
mas saya masih awam dalam ngeblog, saya mau bertanya.
saya sudah buat blog dan template yg saya download uda saya pasang beserta post.nya.
saya mau tanya, apakah jika saya ganti template di blog saya, post yang sudah ada akan hilang?
terima kasih mas.
Keren bgt infonya
Keren bgt infonya
Kok menu di blog mas yadi ini ga dibikin responsive ya mas?
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish