Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

Cara Menciptakan Sajian Kafe Responsive Dan Keren Tanpa Edit Html Di Blog

bang2 sutara - Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemilik situs atau blog dimana didalam sajian navigasi tersebut berisi sekumpulan link-link penting yang menuju ke artikel eksklusif atau ke link kategori blog.

Menu navigasi juga berfungsi sebagai pemandu kepada pengunjung supaya sanggup lebih gampang dalam menentukan kategori yang diinginkan tanpa harus bersusah payah mencarinya, dalam pemahaman singkatnya membantu para pengunjung supaya dengan gampang untuk bisa meng-eksplore seluruh isi blog atau website

Menu navigasi sanggup berbentuk sajian navigasi mendatar (horizontal) atau sajian navigasi menurun (vertical) juga sanggup dibentuk bercabang dengan sub sajian (dropdown) atau tidak, tergantung kebutuhan dari situs tersebut

 Dari klarifikasi diatas sanggup disimpulkan bahwa Menu navigasi atau Menu bar merupakan penujuk arah yang dipasang pada suatu situs yang ditujukan untuk memudahkan para pengunjung blog dalam melaksanakan eksplorasi didalam situs yang kita miliki.

Fitur ini merupakan salah satu elemen yang memang harus dipasang disebuah situs atau blog, alasannya yaitu dengan adanya fitur ini kalian sudah bisa membuat user experience yang baik didalam blog atau situs kalian.

Bagi kalian yang tidak mau ribet dalam melaksanakan pembuatan sajian navigasi atau sajian kafe pada blog, dalam artikel ini saya akan menawarkan cara yang gampang untuk membuat sajian kafe atau sajian navigasi di blog tanpa harus mengedit html.

Baca Juga Artikel Menarik Lainnya:

Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog

Langkah - Langkah Membuat Menu Bar Responsive Di blog

  • Pertama silahkan kalian buka akun blogger kalian
  • Mamsuk ke kemu layout atau Tata Letak .
  • Selanjutnya, kalian pilih sajian Tambahkan Gadget dan pilih Html/JavaScript .
Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
  • Untuk pemilihan daerah widget atau gadget, kalian harus menentukan lokasi gadget paling atas. Contohnya menyerupai pada gambar dibawah ini.
Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
  • Kemudian kalian akan melihat tampilan widget html/JavaScript menyerupai pada gambar dibawah ini, dan kalian perhatikan keterangan dibawah ini :
  1. Untuk bab judul biarkan kosong
  2. Pada bab konten silahkan kalian pastekan isyarat yang akan saya berikan didalam artikel ini
  3. Setelah pengaturan telah kalian buat, langkah terakhir silahkan tekan tombol simpan 
Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog

Pilihan Navigasi Menu responsive


1. Yellow Drop Down Menu Responsive


Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
<!-- CSS --> <style type='text/css'> #menunav *{text-decoration:none;list-style:none;margin:0;padding:0;outline:none} #menunav .section{width:100%;max-width:1200px;margin:0 auto;display:table;position:relative} #menunav{width:100%;display:table;background-color:#fde428;margin-bottom:50px} #menunav #logo{float:left;font-size:24px;text-transform:uppercase;color:#002e5b;font-weight:600;padding:20px 0} #menunav nav{width:auto;float:right} #menunav nav ul{display:table;float:right} #menunav nav ul li{float:left} #menunav nav ul li:last-child{padding-right:0} #menunav nav ul li a{color:#002e5b;font-size:18px;padding:25px 20px;display:inline-block;transition:all 0.5s ease 0s} #menunav nav ul li a:hover{background-color:#002e5b;color:#fde428;transition:all 0.5s ease 0s} #menunav nav ul li a:hover i{color:#fde428;transition:all 0.5s ease 0s} #menunav nav ul li a i{padding-right:10px;color:#002e5b;transition:all 0.5s ease 0s} #menunav .toggle-menu ul{display:table;width:25px} #menunav .toggle-menu ul li{width:100%;height:3px;background-color:#002e5b;margin-bottom:4px} #menunav .toggle-menu ul li:last-child{margin-bottom:0} #menunav input[type=checkbox],label{display:none} @media only screen and (max-width:1440px){#menunav .section{max-width:95%}} @media only screen and (max-width:980px){#menunav{padding:20px 0}#menunav #logo{padding:0}#menunav input[type=checkbox]{position:absolute;top:-9999px;left:-9999px;background:none}#menunav input[type=checkbox]:fous{background:none}#menunav label{float:right;padding:8px 0;display:inline-block;cursor:pointer}#menunav input[type=checkbox]:checked   nav{display:block}#menunav nav{display:none;position:absolute;right:0;top:53px;background-color:#002e5b;padding:0;z-index:99}#menunav nav ul{width:auto}#menunav nav ul li{float:none;padding:0;width:100%;display:table}#menunav nav ul li a{color:#FFF;font-size:15px;padding:10px 20px;display:block;border-bottom:1px solid rgba(225,225,225,0.1)}#menunav nav ul li a i{color:#fde428;padding-right:13px}} @media only screen and (max-width:480px){#menunav .section{max-width:90%}} @media only screen and (max-width:360px){#menunav label{padding:5px 0}#menunav #logo{font-size:20px}#menunav nav{top:47px}} </style> <!-- HTML --> <div id="menunav">   <div class="section">   <a href="https://bang2sutara.blogspot.com/" id="logo" target="_blank">Logo Kalian</a>   <label for="toggle-1" class="toggle-menu"/>   <ul>     <li></li>     <li></li>     <li></li>   </ul>   </label>   <input type="checkbox" id="toggle-1">   <nav>     <ul>       <li><a href="#logo"><i class="fa fa-home"></i>Home</a></li>       <li><a href="#about"><i class="fa  fa-sitemap"></i>Networking</a></li>       <li><a href="#portfolio"><i class="fa fa-gavel"></i>Hardware</a></li>       <li><a href="#services"><i class="fa fa-gears"></i>Services</a></li>       <li><a href="#gallery"><i class="fa fa-picture-o"></i>Gallery</a></li>       <li><a href="#contact"><i class="fa fa-phone"></i>Contact</a></li>     </ul>   </nav>   </div> </div>


2. Black Drop Down responsive


Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog

Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
<style> @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body {   font-family: 'Open Sans', sans-serif;   margin: 0;   padding: 0;   position: relative;   line-height: normal; } .nav-bar {     background: #000;     width: 100%; }  .nav-bar__label {     color: #fff;     display: block;     padding: 10px 0;     text-align: center;     text-transform: uppercase;     width: inherit; }  .nav-bar__label::after, .nav-bar__sub-label::after {     content: " +"; }  .nav-bar__label, .nav-bar__sub-label {     cursor: pointer; }  .nav-bar__list {     background: #000;     list-style: none;     margin: 0;     padding: 0;     width: 100%; }  .nav-bar__list, [id^="toggle"] {     display: none; }  [id^="toggle"]:checked + .nav-bar__list {     display: block; }  .menu_navigation {     display: block; }  .nav-bar__link, .nav-bar__sub-label {     color: #fff;     display: block;     padding: 10px 20px;     text-decoration: none;     word-wrap: break-word; }  .menu_navigation .menu_navigation .nav-bar__link, .menu_navigation .menu_navigation .nav-bar__sub-label {     padding: 10px 10px 10px 30px; }  .nav-bar__link:hover, .nav-bar__link:active, .nav-bar__sub-label:hover {     background: #666; }  @media all and (min-width : 992px) {     .nav-bar > .nav-bar__label {         display: none;     }      .nav-bar > .nav-bar__list {         display: block;     }      .nav-bar > .nav-bar__list > .menu_navigation {         display: inline-block;         position: relative;     }      .menu_navigation .nav-bar__list {         position: absolute;     }      .menu_navigation .menu_navigation .nav-bar__link,     .menu_navigation .menu_navigation .nav-bar__sub-label {         padding: 10px 20px;     } } p{   width:100%;   display:block;   text-align:center;   font-size:200% } </style> <nav class="nav-bar">     <label for="toggle" class="nav-bar__label"><b>Menu Keren Komputerdia</b></label>     <input type="checkbox" id="toggle" class="nav-bar__toggle"/>     <ul class="nav-bar__list">         <li class="menu_navigation">             <a href=" " class="nav-bar__link">Menu Item 1</a>         </li>         <li class="menu_navigation">             <a href="#" class="nav-bar__link">Menu Item 2</a>         </li>         <li class="menu_navigation">             <a href="#" class="nav-bar__link">Menu Item 3</a>         </li>         <li class="menu_navigation">             <label for="toggle-sub-1" class="nav-bar__sub-label">Sub Menu</label>             <input type="checkbox" id="toggle-sub-1" class="nav-bar__toggle"/>             <ul class="nav-bar__list">                 <li class="menu_navigation">                     <a href="#" class="nav-bar__link">Sub Menu 1</a>                 </li>                 <li class="menu_navigation">                     <a href="#" class="nav-bar__link">Sub Menu 2</a>                 </li>                 <li class="menu_navigation">                     <a href="#" class="nav-bar__link">Sub Menu 3</a>                 </li>             </ul>         </li>         <li class="menu_navigation">             <a href="#" class="nav-bar__link">Menu Item 4</a>         </li>     </ul> </nav> <br><br><br><br><br><br><br><br><br><br> <p><a href=" " target='_blank'>Kembali Ke Tutorial</a></p>



3. Simple Grey Navbar Responsive


Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
<style> @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); body {   font-family: 'Open Sans', sans-serif;   margin: 0;   padding: 0;   position: relative;   line-height: normal; } nav#menunav {   margin: 0 auto;   max-width: 700px;   width: 95%; }  nav#menunav #checkbox1, nav#menunav .toggle {   display: none; }  nav#menunav .menu {   padding: 0;   margin: 0;   max-width: 700px;   height: 50px;   border-radius: 5px;   display: flex;   flex-direction: row;   justify-content: space-around;   align-items: center;   list-style-type: none; }  nav#menunav .menu li a {   text-decoration: none;   align-self: center;   border-radius: 5px;   font-size: 14px;   padding: 10px 15px;   transition: background .2s linear; }  @media screen and (max-width: 600px) {   nav#menunav .menu li a {     font-size: 13px;   } }  @media screen and (max-width: 550px) {   nav#menunav .toggle {     clear: both;     display: block;     text-align: center;     font-size: 14px;     line-height: 40px;     cursor: pointer;     width: 100%;     height: 40px;     font-size: 18px;     color: #595959;     background: #dbdbdb;     border-bottom-left-radius: 5px;     border-bottom-right-radius: 5px;     transition: all .1s linear;   }   nav#menunav .toggle:hover {     background: #cecece;   }   nav#menunav #checkbox1:checked + label .demo li {     opacity: 1;     visibility: visible;     transition: all .7s linear;   }    nav#menunav #checkbox1:checked + label .demo {     height: 200px;   }   nav#menunav .menu {     border-radius: 0px;     border-top-left-radius: 5px;     border-top-right-radius: 5px;     display: flex;     flex-direction: column;     justify-content: space-around;     align-items: center;     height: 0px;     transition: height .3s linear;   }   nav#menunav .menu li {     display: flex;     /* magic */     align-self: center;     width: 95%;     opacity: 0;     visibility: hidden;   }   nav#menunav .menu li a {     width: 95%;     text-align: center;     align-self: center;     align-content: center;   } }  nav#menunav .demo {   background: #625b60; }  nav#menunav .demo li a {   color: #fff; }  nav#menunav .demo li a:hover {   background: #6d6268; } p{   width:100%;   display:block;   text-align:center;   font-size:200% } </style> <nav id="menunav">     <input type="checkbox" id="checkbox1" />     <label for="checkbox1"> <ul class="menu demo">   <li><a href="#"><b>HOME</b></a></li>   <li><a href="#"><b>NETWORK</b></a></li>     <li><a href="#"><b>HARDWARE</b></a></li>     <li><a href="#"><b>SOFTWARE</b></a></li>   </ul>   <span class="toggle">☰</span>   </label> </nav>


4. Material Blue Drop Down Responsive

Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
Pengertian Menu Navigasi atau Menu Bar yaitu sebuah akomodasi yang diberikan oleh pemili Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
<style> #materialmenu *{margin:0;padding:0;box-sizing:border-box} #materialmenu{width:100%;height:50px;background-color:#3498DB;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)} #materialmenu a{text-decoration:none} #materialmenu > nav#menunav > div{float:left;width:16.6666%;height:100%;position:relative} #materialmenu > nav#menunav > div > a{text-align:center;width:100%;height:100%;display:block;line-height:50px;color:#fbfbfb;transition:background-color 0.2s ease;text-transform:uppercase} #materialmenu > nav#menunav > div:hover > a{background-color:rgba(0,0,0,0.1);cursor:pointer} #materialmenu > nav#menunav > div > div{display:none;overflow:hidden;background-color:white;min-width:200%;position:absolute;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);padding:10px} #materialmenu > nav#menunav > div:not(:first-of-type):not(:last-of-type) > div{left:-50%;border-radius:0 0 3px 3px} #materialmenu > nav#menunav > div:first-of-type > div{left:0;border-radius:0 0 3px 0} #materialmenu > nav#menunav > div:last-of-type > div{right:0;border-radius:0 0 0 3px} #materialmenu > nav#menunav > div:hover > div{display:block} #materialmenu > nav#menunav > div > div > a{display:block;float:left;padding:8px 10px;width:46%;margin:2%;text-align:center;background-color:#3498DB;color:#fbfbfb;border-radius:2px;transition:background-color 0.2s ease} #materialmenu > nav#menunav > div > div > a:hover{background-color:#212121;cursor:pointer} h1{margin-top:150px;font-weight:300} @media (max-width:600px){#materialmenu > nav#menunav > div > div > a{margin:5px 0;width:100%}#materialmenu > nav#menunav > div > a > span{display:none}} p{   width:100%;   display:block;   text-align:center;   font-size:200% } </style> <div id="materialmenu">   <nav id="menunav">     <div> <a href="#"><span>Menu </span>1</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>     <div> <a href="#"><span>Menu </span>2</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>     <div> <a href="#"><span>Menu </span>3</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>     <div> <a href="#"><span>Menu </span>4</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>     <div> <a href="#"><span>Menu </span>5</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>     <div> <a href="#"><span>Menu </span>6</a>       <div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>     </div>   </nav> </div>