Pada tutorial blogging kali ini, akan diberikan bagaimana cara menambahkan menu navigasi yang responsive (tidak melebar jika blog/website) ditampilkan pada handphone. Terkadang ini cukup merepotkan bagi seorang blogger pemula. Apalagi yang benar benar ingin membangun blog dengan template sendiri (template bawaan blogger).
Pada template bawaan blogger, anda tidak dibekali menu yang responsive, kecuali anda menggunakan tema tema terbaru blogger. Tapi jangan khawatir, ini cara paling mudah membuat menu laman navigasi pada blog.
Anda cukup copy code di bawah ini. Kemudian, pastekan pada sebuah widget HTML pada Tata Letak blog anda. Posisi yang paling tepat tentu saja di bagian atas blog.
Ambil atau tambahkan widget HTML. Ini kode yang harus anda pastekan.
/*navmenu-horizontal*/
#nav{background:#9c9c9c;}
#nav ul{margin:0;padding:0;}
#nav li{display:inline;display:inline-block;display:-moz-inline-stack;list-style:none;margin:0;padding:0;zoom:1;}
#nav li a{color:#ffffff;display:block;padding:1em;text-decoration:none;}
#nav li a:hover{background:#191919;color:#ffffff;}
#nav li:first-child{background:#e42a2a;}
.top-menu{background:#c91717;color:#fff;display:none;padding:10px 5px;text-align:left;text-decoration:none;}
.top-menu span{float:right;margin-right:1em;}
.top-menu b{font-size:24px;font-family:Arial}
#nav input[type=checkbox]:checked ~ #menus{display:block;}
#nav input[type=checkbox]{display:none;}
/*css-styles-responsive*/
@media screen and (max-width:768px){
#nav ul{display:none;position:static;}
#nav li{border-bottom:1px solid #333;}
#nav ul li, #nav li a{width:100%;}
#nav li a{display:block;height:auto;line-height:normal;}
#nav li a{text-align:left;}
.top-menu{display:block!important;line-height:30px;}
.top-menu:hover{cursor:pointer;}
label{margin:0!important;}
}
</style>
<!--- Kode HTML Menu Horizontal Responsive Sederhana --->
<nav id='nav'>
<label class='top-menu' for='top-menu'><b>☰</b> <span>Menu</span></label>
<input autocomplete='off' id='top-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a href=/'><i class="fa fa-home" aria-hidden="true"></i> <b>Home</b></a></li>
<li><a href='LINKTUJUAN'> <i class="fa fa-folder-open" aria-hidden="true"></i>  <b>MENU1</b></a></li>
<li><a href='LINKTUJUAN'> <i class="fa fa-phone" aria-hidden="true"></i> <b>MENU2</b></a></li>
<li><a href='LINKTUJUAN'> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>  <b>MENU 3</b></a></li>
<!--Kalau mau nambah-->
</ul>
</nav>
Jika memiliki lebih dari 3 menu anda bisa tambahkan:
<li><a href='LINKTUJUAN'> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>  <b>MENU 4</b></a></li>
di atas kata <!--Kalau mau nambah-->
Untuk tanda bagian yang saya beri warna backround di atas, bisa anda edit sesuai warna pilihan anda. Anda bisa browsing di mesin pencarian google, dengan kata kunci, HTML CODE COLOR. Selanjutnya, silakan widget tersebut disimpan. Baca juga: Menambahkan Icon pada Menu Navigasi Blog
Pada template bawaan blogger, anda tidak dibekali menu yang responsive, kecuali anda menggunakan tema tema terbaru blogger. Tapi jangan khawatir, ini cara paling mudah membuat menu laman navigasi pada blog.
Anda cukup copy code di bawah ini. Kemudian, pastekan pada sebuah widget HTML pada Tata Letak blog anda. Posisi yang paling tepat tentu saja di bagian atas blog.
<style type="text/css">
/*navmenu-horizontal*/
#nav{background:#9c9c9c;}
#nav ul{margin:0;padding:0;}
#nav li{display:inline;display:inline-block;display:-moz-inline-stack;list-style:none;margin:0;padding:0;zoom:1;}
#nav li a{color:#ffffff;display:block;padding:1em;text-decoration:none;}
#nav li a:hover{background:#191919;color:#ffffff;}
#nav li:first-child{background:#e42a2a;}
.top-menu{background:#c91717;color:#fff;display:none;padding:10px 5px;text-align:left;text-decoration:none;}
.top-menu span{float:right;margin-right:1em;}
.top-menu b{font-size:24px;font-family:Arial}
#nav input[type=checkbox]:checked ~ #menus{display:block;}
#nav input[type=checkbox]{display:none;}
/*css-styles-responsive*/
@media screen and (max-width:768px){
#nav ul{display:none;position:static;}
#nav li{border-bottom:1px solid #333;}
#nav ul li, #nav li a{width:100%;}
#nav li a{display:block;height:auto;line-height:normal;}
#nav li a{text-align:left;}
.top-menu{display:block!important;line-height:30px;}
.top-menu:hover{cursor:pointer;}
label{margin:0!important;}
}
</style>
<!--- Kode HTML Menu Horizontal Responsive Sederhana --->
<nav id='nav'>
<label class='top-menu' for='top-menu'><b>☰</b> <span>Menu</span></label>
<input autocomplete='off' id='top-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a href=/'><i class="fa fa-home" aria-hidden="true"></i> <b>Home</b></a></li>
<li><a href='LINKTUJUAN'> <i class="fa fa-folder-open" aria-hidden="true"></i>  <b>MENU1</b></a></li>
<li><a href='LINKTUJUAN'> <i class="fa fa-phone" aria-hidden="true"></i> <b>MENU2</b></a></li>
<li><a href='LINKTUJUAN'> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>  <b>MENU 3</b></a></li>
<!--Kalau mau nambah-->
</ul>
</nav>
Jika memiliki lebih dari 3 menu anda bisa tambahkan:
<li><a href='LINKTUJUAN'> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>  <b>MENU 4</b></a></li>
di atas kata <!--Kalau mau nambah-->
Untuk tanda bagian yang saya beri warna backround di atas, bisa anda edit sesuai warna pilihan anda. Anda bisa browsing di mesin pencarian google, dengan kata kunci, HTML CODE COLOR. Selanjutnya, silakan widget tersebut disimpan. Baca juga: Menambahkan Icon pada Menu Navigasi Blog
Share Yuk
Related Posts
Loading...
malah keluar diluar bukan responsive
ReplyDelete