Monday, May 23, 2016

Cara Membuat Menu Navigasi Responsive Di Blog Dengan Mudah

Unknown 5/23/2016 Blogger Widgets 1 comment :

Cara Membuat Menu Navigasi Responsive Di Blog Dengan Mudah- Terlalu banyak link di sidebar jelas dapat membingungkan pengunjung, blog tidak kelihatan rapi dan terlihat 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 posting 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.

Baca : cara membuat read more pada blogger

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 di lakukan masuk ke dasbhord blog anda pilih Template lalu klik Edit HTML.

Setelah itu cari kode ]]></b:skin> sudah ketemu 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 di atas adalah kode warna dan panjang navigasi, silahkan anda ganti warna dan panjang navigasi sesuai dengan template dan warna kesukaan anda.

Baca: cara membuat widget related post fast loading pada blogger

Terakhir 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, 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>.

Baca: cara membuat google custom search engine pada blogger

Semoga template anda menjadi responsive dan terlihat rapi, bila ada pertanyaan silahkan anda berkomentar sesuai topik hari ini.