Cara Menciptakan Sajian Kafe Responsive Blogger Tanpa Edit Html

bang2 sutara - Jika kalian merasa tidak cukup dengan artikel saya sebelumnya yang sama-sama menjelaskan wacana pembuatan sajian kafe atau sajian navigasi responsive tanpa harus melaksanakan edit html, diartikel kali ini juga saya akan mencoba memperlihatkan suplemen style sajian kafe yang dapat kalian gunakan untuk menciptakan navigasi di blog kalian.

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>&#9776;</b> <span>Menu</span></label> <input autocomplete='off' id='top-menu' role='button' type='checkbox'/> <ul id='menus'> <li><a href='https://bang2sutara.blogspot.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 sehabis telah kalian atur, silahkan kalian tekan tombol Simpan / Save .
Silahkan kalian lihat hasilnya

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