Saturday, 23 May 2015T5/23/2015 09:59:00 am

CARA MEMBUAT MENU NAVIGASI DROPDOWN KEREN DI BLOG

Salam blogger..... posting kali ini saya akan membahas tentang cara membuat menu navigasi dropdown di blog. menu navigasi kegunaan nya adalah untuk mengakses link ke halaman tertentu, di menu ini kita dapat menggolongkan berbagai kategory artikel, sehingga pengunjung / visitor dapat dengan mudah mencari artikel yang ada di blog kita. 

untuk dapat membuat menu navigasi ini kita membutuhkan beberapa script yang akan di tambahkan pada html blog kita. contoh menu dropdown nya dapat dilihat pada gambar di bawah ini.

1. langkah pertama yang harus kita lakukan adalah silahkan sobat masuk ke dashboard blog anda.
2. selanjutnya pilih template >> Edit HTML
3. kemudian salin kode HTML di bawah ini dan letakan tepat di atas kode ]] </b:skin> . untuk memudahkan pencarian tekan Ctrl + F dan masukan kode ]] </b:skin> di dalam kotak tersebut.

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. selanjutnya tambahkan kode di bawah ini dan letakan tepat di atas kode ]] </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. untuk memperoleh hasil yang keren tambahkan kode di bawah ini tepat di bagian bawah header blog sobat.


<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. selanjutnya simpan template dan lihat hasilnya.

note : sebelum sobat memasukan kode di atas , sebaiknya sobat back up dulu template sobat yang sebelum nya, agar menghindari ketika terdapat kesalahan pada script yang di masukan.

selamat mencoba dan semoga berhasil.

Previous
Next Post »
1 Komentar untuk "CARA MEMBUAT MENU NAVIGASI DROPDOWN KEREN DI BLOG"

Silahkan tinggalkan komentar dibawah ini,
Terima kasih sudah :
1. Berkomentar dengan sopan
2. Tidak meninggalkan link aktif dalam form komentar
3. Berkomentar sesuai postingan / artikel
4. Tidak membuat komentar yang mengandung SARA / SPAM
5. Memberikan informasi link / script yang tidak berfungsi

Terima Kasih Sudah Berkomentar

PENDAPAT ANDA TENTANG BLOG INI ?

Follow by Email

 
Copyright © 2014 uduy macal blog's - All Rights Reserved
Template By Kuncidunia
DMCA.com Protection Status