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 Blogger Tanpa Edit Html

Cara Membuat Menu Bar Elegan Responsive Mobile


Cara Membuat Menu Bar Responsive Blogger Tanpa Edit Html
  • 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/
.
.

Berlangganan Artikel terbaru (free):

Post a Comment