Cara Membuat Menu Bar Responsive Blogger Tanpa Edit Html

komputerdia.com - Jika kalian merasa tidak cukup dengan artikel saya sebelumnya yang sama-sama menjelaskan tentang pembuatan menu bar atau menu navigasi responsive tanpa harus melakukan edit html, diartikel kali ini juga saya akan mencoba memberikan tambahan style menu bar yang bisa kalian gunakan untuk membuat navigasi di blog kalian.

Baca Juga :

• Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog .
• Cara Membuat Tombol Show Hide Keren Di Widget Blogger .
• Cara Membuat Gambar Berderet Horizontal Di Postingan Blog .
• 13 Cara Membuat Artikel Seo Friendly Agar Bisa Bersaing Di Mesin Pencari .

Cara Membuat Menu Bar Elegan Responsive Mobile

• Pertama silahkan kalian login ke akun blogger kalian
• Selanjutnya silahkan kalian masuk ke menu Layout atau Tata Letak .
• Pilih menu Add Widget atau Tambahkan Gadget kemudin pilih menu Html/JavaScript .
• Setelah keluar halaman Html/JavaScript, pada bagian kontennya silahkan kalian tempelkan kode dibawah ini

<style type="text/css">
body{font-family:"Roboto",sans-serif!important;font-size:100%;margin:0px;padding:0px;}

/*navmenu-horizontal*/
#nav{background:#111111;}
#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:30px;}
#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>&#9776;</b> <span>Menu</span></label>
<input autocomplete='off' id='top-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a href='http://www.komputerdia.com/'><i class="fa fa-home" aria-hidden="true"></i>&#160;<b>Home</b></a></li>
<li><a href='#'><i class="fa fa-wikipedia-w" aria-hidden="true"></i>&#160;<b>WikiPedia</b></a></li>
<li><a href='#'><i class="fa fa-wordpress" aria-hidden="true"></i>&#160;<b>WordPress</b></a></li>
<li><a href='#'><i class="fa fa-windows" aria-hidden="true"></i>&#160;<b>Windows</b></a></li>
</ul>
</nav>

• Setelah semua setelah telah kalian atur, silahkan kalian tekan tombol Simpan / Save .
• Silahkan kalian lihat hasilnya

Sumber Referensi : https://mastamvan.blogspot.co.id/

Share this post