Cara Membuat Menu Navigasi Responsive Di Blog Dengan Mudah

Cara Membuat Menu Navigasi Responsive Di Blog Dengan Mudah- Terlalu banyak link di sidebar jelas dapat membingungkan pengunjung, blog tidak kelihatan rapi dan kelihatan seperti tidak profesional dalam mengelola blog. Maka sebuah menu navigasi adalah cara yang bagus untuk menyembunyikan link ekstra sementara, namun masih bisa tersedia bagi pengunjung. Jadi menu navigasi bar jelas merupakan bagian penting setiap website atau blog kita. Di mana pengunjung dapat dengan mudah menavigasi postingan dan halaman yang ada di dalam blog. Penggunaan menu drop down merupakan cara yang nyaman untuk menavigasi dan menyembunyikan link seperti About me, Privaci policy, sitemap dan lain sebagainya.

cara membuat menu navigasi di blogger dengan mudah

Navigasi responsive

Sayangnya, sebagian blog di blogger.com tidak memiliki fitur navigasi ini maka kita harus menambahkanya sendiri, hal ini memerlukan sedikit pengetahuan CSS dan HTML. Tapi tenang saja, saya akan memandu anda melalui itu semua sehingga anda tidak akan bingung dalam membuat navigasi.

Menu navigasi yang akan kita buat ini, sudah saya praktekkan dan 100% berhasil serta responsive. Maka anda hanya mengikuti tutorial yang saya berikan kemudian anda terapkan dalam blog anda. Untuk lebih jelasnya mari ikuti intruksi saya di bawah ini sebagai berikut:

Cara memasang menu navigasi responsive di blogger

Langkah pertama yang harus anda lakukan masuk dasbhord blog anda>>Template>>Edit HTML.

Kemudian anda ikuti intruksi dibawah ini;

Cari kode ]]></b:skin> kemudian copy kode di bawah ini dan pastekan tepat di atasnya.

/* -------------ROHENK NAV MENU--------------- */
.toggleMenu {
display: none;
background: #FBB040;
padding: 0 15px;
height: 48px;
line-height: 48px;
color: #fff !important;
}
#nav-bar {
font-family: "Oswald", Arial, sans-serif;
background: #444;
height: 48px;
line-height: 48px;
text-transform:uppercase;
}
ul.nav-menu {
background: #444;
list-style: none;
margin: 0 0 0 0;
*zoom: 1;
float: left;
}
ul.nav-menu:before,
ul.nav-menu:after {
content: " ";
display: table;
}
ul.nav-menu:after {
clear: both;
}
ul.nav-menu ul {
list-style: none;
margin:0 0 0 0;
width: 9em;
}
ul.nav-menu li {
position: relative;
margin: 0 0;
}
ul.nav-menu > li {
float: left;
}
ul.nav-menu > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
ul.nav-menu li ul {
position: absolute;
left: -9999px;
}
ul.nav-menu > li.hover > ul {
left: 0;
}
ul.nav-menu li li.hover ul {
left: 100%;
top: 0;
}
ul.nav-menu a.active {
background: #FBB040;
}
ul.nav-menu li a {
display: block;
padding: 0 15px;
color: #fff;
height: 48px;
line-height: 48px;
}
ul.nav-menu li li a {
display: block;
background: #555;
position: relative;
z-index: 100;
height: 34px;
line-height: 34px;
}
ul.nav-menu li li li a {
background: #666;
z-index: 200;
}
ul.nav-menu a:hover, ul.nav-menu a.active:hover {
background: #222;
}
#search-form {
background: #444;
float: right;
margin: 0 0;
}
#search-form input#search-box[type="text"] {
height: 36px;
line-height: 36px;
margin: 5px 0 5px 10px;
padding: 0 10px;
width: 150px;
color: #636363;
border: none;
text-transform: uppercase;
}
#search-form input#search-button[type="submit"] {
background: #FBB040;
color: #fff;
height: 36px;
line-height: 36px;
margin: 5px 10px 5px 0;
padding: 0 10px;
border: none;
text-transform: uppercase;
}
#search-form input#search-button[type="submit"]:hover{
background: #000;
}
#search-form input#search-box[type="text"]:focus {
background: #eee;
outline: none;
}

@media screen and (max-width: 768px) {
.active {
display: block;
}
ul.nav-menu a.active {
background: transparent;
}
#search-form {
width: 100%;
margin: 0 0 0 0 !important;
}
ul.nav-menu > li {
float: none;
}
ul.nav-menu > li > .parent {
background-position: 95% 50%;
}
ul.nav-menu li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.nav-menu {
float: none;
width: 100%;
}
ul.nav-menu ul {
display: block;
width: 100%;
float: none;
}
ul.nav-menu > li.hover > ul , ul.nav-menu li li.hover ul {
position: static;
}
#search-form {
background: #666;
}
}

Keterangan:
Tulisan yang saya beri block warna hijau diatas itu kode warna dan panjang navigasi silahkan anda ganti warna dan panjang navigasi di atas sesuai dengan tema template anda dan warna kesukaan anda.

Kemudian anda cari kode </header> copy kode dibawah ini dan pastekan tepat dibawahnya.

<nav id='nav-bar'>
<a class='toggleMenu' href='#'>Menu</a>
<ul class='nav-menu'>
<li><a class='active' href='/'>Home</a></li>
<li><a href='#'>Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Sub Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...' vinput=''/> <input id='search-button' type='submit' value='Go'/></form>
</nav>

Keterangan:
Untuk anda yang menggunakan template asli blogger, Kode diatas anda paste di antara tengah-tengah kode </div> di atas kode </header>.
Untuk template lain selain template bawaan blogger anda letakkan sesuai keinginan anda bisa di atas <header> maupun di bawah </header>.

Semoga tutorial kali ini bisa membuat template anda menjadi responsive dan terlihat rapi. Bila ada pertanyaan silahkan anda berkomentar sesuai topik hari ini.

Ada Center

Cara Membuat Menu Navigasi Responsive Di Blog Dengan Mudah

Cara memasang menu navigasi responsive di blogger

Related Posts

Posting Komentar

Posting Komentar

Label List

Popular