komputerdia.com - Jika kalian merasa tidak cukup dengan artikel saya sebelumnya yang sama-sama menjelaskan perihal pembuatan sajian kafetaria atau sajian navigasi responsive tanpa harus melaksanakan edit html, diartikel kali ini juga saya akan mencoba memperlihatkan pelengkap style sajian kafetaria yang dapat kalian gunakan untuk menciptakan 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 sajian Layout atau Tata Letak .
- Pilih sajian Add Widget atau Tambahkan Gadget kemudin pilih sajian Html/JavaScript .
- Setelah keluar halaman Html/JavaScript, pada bab kontennya silahkan kalian tempelkan isyarat 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>☰</b> <span>Menu</span></label> <input autocomplete='off' id='top-menu' role='button' type='checkbox'/> <ul id='menus'> <li><a href='aciknadzirah.blogspot.com/'><i class="fa fa-home" aria-hidden="true"></i> <b>Home</b></a></li> <li><a href='#'><i class="fa fa-wikipedia-w" aria-hidden="true"></i> <b>WikiPedia</b></a></li> <li><a href='#'><i class="fa fa-wordpress" aria-hidden="true"></i> <b>WordPress</b></a></li> <li><a href='#'><i class="fa fa-windows" aria-hidden="true"></i> <b>Windows</b></a></li> </ul> </nav> - Setelah semua sehabis telah kalian atur, silahkan kalian tekan tombol Simpan / Save .
- Silahkan kalian lihat hasilnya
Sumber Referensi : https://mastamvan.blogspot.co.id/