Skip to content Skip to sidebar Skip to footer

Widget HTML #1

Cara Membuat Menu Navigasi Blog

Janoopedia.com - Cara membuat menu navigasi blog

Membuat menu navigasi di blog adalah suatu keharusan yang harus dilakukan di dalam blog. Menu navigasi memudahkan pengunjung untuk mencari yang mereka butuhkan di blog kita. Dengan menu navigasi yang mudah digunakan oleh pengguna membuat user experience menjadi lebih baik. Google juga lebih menyukai blog yang memiliki menu navigasi yang rapih.

Cara Membuat Menu Navigasi Blog 

Langkah pertama yang harus dilakukan adalah, Login terlebih dahulu ke blogger kemudian buka bagian tema - dan pilih edit HTML.

Langkah kedua cari kode ]]></b:skin> atau </style> kemudian letakkan kode berikut tepat diatas kode tadi.

/* Menu Navigasi */

.menunav{max-width:auto;background:#1a7db7; color:#fff;display:inline-block;width:100%;border-bottom: 3px solid #dfdfdf;}

.menunav ul{width:100%;padding:0;margin:0 auto}

.menunav li:first-child a{padding:7px 10px 3px}

.menunav li{list-style:none;display:inline-block;float:left}

.menunav li a{;color:#fff;display:block;font:bold 13px Arial;position:relative;text-decoration:none;padding:10px}

.menunav li a:hover{background:#2374a3; color:#fff}

.menunav li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}

.menunav li li a,.menunav li li a:link,.menunav li li a:visited{background:#2c8fc9;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;text-shadow: none;opacity:0.8}

.menunav li li a:hover,.menunav li li a:active{background:#2374a3}

.menunav li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}

.menunav li ul a{width:140px}

.menunav li ul ul{margin:-33px 0 0 157px}

.menunav li:hover>ul,.menunav li.sfHover ul{left:auto}

.menusearch{width: 210px;;float:right;margin:0 auto;padding: 13px 0 0;}

.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:23px; overflow:hidden;border-radius:3px;border:1px solid #5c820d;}

.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}

.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;}

.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0} none;line-height:23px;}

.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}

Langkah ke tiga pasangkan kode navigasi dibawah ini setelah kode </header>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Sub Menu 1</a>

<ul>

<li><a href='#'>Sub 1</a></li>

<li><a href='#'>Sub 2</a></li>

<li><a href='#'>Sub 3</a></li>

</ul>

</li>

<li><a href='#'>Menu 2</a></li>

<li><a href='#'>Menu 3</a></li>

<li><a href='#'>Menu 4</a></li>

<li><a href='#'>Menu 5</a></li>

Kemudian masukkan kode dibawah ini agar menu navigasi menjadi responsive di atas kode ]]></b:skin> atau </style>

@media only screen and (max-width:768px){

.menunav li{float:none;}

.menunav li a{background:none}.menunav ul{text-align:center;width:100%}.menusearch{float:none;padding:5px 0 10px}

}

Jika semua langkah diatas sudah dilakukan maka klik SAVE/SIMPAN.

Itulah cara membuat Menu Navigasi di blog yang mudah di blogspot. Agar teman - teman memiliki blog yang lebih ngebut, teman - teman bisa memilih tema premium yang ada di bagian Produk blog ini. 

Post a Comment for "Cara Membuat Menu Navigasi Blog "