Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog

komputerdia.com - Menu navigasi atau Menu bar merupakan penujuk arah yang dipasang pada suatu situs yang ditujukan untuk memudahkan para pengunjung blog dalam melakukan eksplorasi didalam situs yang kita miliki. Fitur salah satu elemen yang memang harus dipasang disebuah situs atau blog, karena dengan adanya fitur ini kalian sudah mampu menciptakan user experience yang baik didalam blog atau situs kalian.

Bagi kalian yang tidak mau ribet dalam melakukan pembuatan menu navigasi atau menu bar pada blog, dalam artikel ini saya akan memberikan cara yang mudah untuk membuat menu bar atau menu navigasi di blog tanpa harus mengedit html.

Baca Juga :

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 menu Tambahkan Gadget dan pilih Html/JavaScript .
Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
  • Untuk pemilihan tempat widget atau gadget, kalian harus memilih lokasi gadget paling atas. Contohnya seperti pada gambar dibawah ini.
Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
  • Kemudian kalian akan melihat tampilan widget html/JavaScript seperti pada gambar dibawah ini, dan kalian perhatikan keterangan dibawah ini :
  1. Untuk bagian judul biarkan kosong
  2. Pada bagian konten silahkan kalian pastekan kode yang akan saya berikan didalam artikel ini
  3. Setelah pengaturan telah kalian buat, langkah terakhir silahkan tekan tombol simpan 
Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog

Pilihan Navigasi Menu responsive

1. Yellow Drop Down Menu Responsive


Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
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="http://www.komputerdia.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


Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog

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="http://www.komputerdia.com/2017/09/cara-membuat-menu-bar-keren-dan-responsive-di-blog.html" 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="http://www.komputerdia.com/2017/09/cara-membuat-menu-bar-keren-dan-responsive-di-blog.html" target='_blank'>Kembali Ke Tutorial</a></p>


3. Simple Grey Navbar Responsive


Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
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

Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog
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>



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

Berlangganan Artikel terbaru (free):

3 Responses to "Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog"

  1. kenapa ya semua menu saya kalau saya klik selalu ada tulisan Showing posts with label Beauty. Show all posts
    bagaimana caranya supaya saat saya klik menu beauty tidak keluar Showing posts with label Beauty. Show all posts tersebut

    ReplyDelete
  2. 1. Yellow Drop Down Menu Responsive work
    Kenapa yang berfungsi hanya nomor 1 saja

    nomor 2 sampai 4 tidak bekerja dengan baik, sudah saya coba di blog sya
    hasilnya erorr.

    nomor 1 sudah bagus menurut saya, Tolong upload yang ber icon,
    terimakasih

    ReplyDelete
  3. @Surito Talent
    Kode udah diperbaiki mas, sebenarnya dibagian CSS nya hanya tinggal menambahkan kode (<)style(>) "tanpa tanda kurung". pada bagian pembukaan dan gunakan (<)/stye(>)"tanpa tanda kurung" pada bagian penutup CSS

    ReplyDelete