Cara Membuat Menu Bar Keren Pada Blogspot

Cara Membuat Menu Bar Keren Pada Blog Dengan Mudah. Artikel ini pun admin unggah karena ada salah satu teman Admin yang bertanya kepada admin tentang Bagaimana Cara Membuat Menu Bar pada Blog. Tapi sebelum saya jelaskan caranya, terlebih dahulu saya akan menjelaskan apa sih Menu Bar dan apa fingsinya? Menu Bar adalah konten yang biasanya terletak pada bagian atas Blog atau pada sekitar Haeder Blog, Sedangkan fungsi menu bar adalah salah satunya yaitu sebagai Pintasan agar pengunjung lebih mudah dalam menelusuri atau mengetahui apa saja yang ada pada Blog yang di kunjunginya.

Ada banyak macam menu bar yang di gunakan pada Blog, mulai dari bentuk yang biasa-biasa saja  sampai dengan bentuk yang unik. Nah, menu bar yang saya berikan ini adalah menu bar yang tampilannya keren dan pastinya unik, oleh karenanya silahkan sobat pantau cara memasangnya di bawah ini.

• Copy Kode CSS di bawah ini dan Paste kan di atas ]]></b:skin> dengan cara Login ke Blog>>Edit Tamplate

  #nav,#nav ul {
      list-style: none outside none;
      margin: 0;
      padding: 0;
  }
  #nav {
      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxOigfMs7KkdMzIfGgtyA9NSzOmRQ4BJewT3X2WEQmd7fp6QUaPyE8plXqQC0IjPfWkm63EopfFgRHc4_tbGdOmR_OFy8KlF9hEkWGGX8PhaSuzX3YDntu6GIkSTVRtHUsq2dUMAlw8xR/s1600/menu_bg.png') no-repeat scroll 0 0 transparent;
      clear: both;
      font-size: 12px;
      height: 58px;
      padding: 0 0 0 9px;
      position: relative;
      width: 957px;
  }
  #nav ul {
      background-color: #222;
      border:1px solid #222;
      border-radius: 0 5px 5px 5px;
      border-width: 0 1px 1px;
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
      left: -9999px;
      overflow: hidden;
      position: absolute;
      top: -9999px;
      z-index: 2;
      -moz-transform: scaleY(0);
      -ms-transform: scaleY(0);
      -o-transform: scaleY(0);
      -webkit-transform: scaleY(0);
      transform: scaleY(0);
      /*-moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -moz-transition: -moz-transform 0.1s linear;
      -ms-transition: -ms-transform 0.1s linear;
      -o-transition: -o-transform 0.1s linear;
      -webkit-transition: -webkit-transform 0.1s linear;
      transition: transform 0.1s linear;*/
  }
  #nav li {
      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVSyFnUh2OCA08GfXP7mgGxnmiaHzgSYT_nJVdO-icwOga551KcBAOeqpSNiySvh-W17lnbioag0Ij0Zcsd_KRXRHDSE4XOduWv6IiWVQSCVt8WltxZ5ZwwbmXUdiUVMlfYzKH9dgW9b9O/s1600/menu_line.png') no-repeat scroll right 5px transparent;
      float: left;
      position: relative;
  }
  #nav li a {
      color: #FFFFFF;
      display: block;
      float: left;
      font-weight: normal;
      height: 30px;
      padding: 23px 20px 0;
      position: relative;
      text-decoration: none;
      text-shadow: 1px 1px 1px #000000;
  }
  #nav li:hover > a {
      color: #00B4FF;
  }
  #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
      background: none repeat scroll 0 0 #121212;
      outline: 0 none;
  }
  #nav li:hover ul.subs {
      left: 0;
      top: 53px;
      width: 180px;
      -moz-transform: scaleY(1);
      -ms-transform: scaleY(1);
      -o-transform: scaleY(1);
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
  }
  #nav ul li {
      background: none;
      width: 100%;
  }
  #nav ul li a {
      float: none;
  }
  #nav ul li:hover > a {
      background-color: #121212;
      color: #00B4FF;
  }
  #lavalamp {
      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZlNnS1n1G49SZ9eQ4nFRcXH71obr0mB-cmZcXZ1siV9bLA5_k7xhC0Y58ntUHBNVwO5H1TarN3XztW85dqhFgoNwmD2zcblqEc_p9hdP52utrZoqDsWf5HfE9NbJEVMMFe1RdvNa_KMQM/s1600/lavalamp.png') no-repeat scroll 0 0 transparent;
      height: 16px;
      left: 13px;
      position: absolute;
      top: 0px;
      width: 64px;
      -moz-transition: all 300ms ease;
      -ms-transition: all 300ms ease;
      -o-transition: all 300ms ease;
      -webkit-transition: all 300ms ease;
      transition: all 300ms ease;
  }
  #lavalamp:hover {
      -moz-transition-duration: 3000s;
      -ms-transition-duration: 3000s;
      -o-transition-duration: 3000s;
      -webkit-transition-duration: 3000s;
      transition-duration: 3000s;
  }
  #nav li:nth-of-type(1):hover ~ #lavalamp {
      left: 13px;
  }
  #nav li:nth-of-type(2):hover ~ #lavalamp {
      left: 90px;
  }
  #nav li:nth-of-type(3):hover ~ #lavalamp {
      left: 170px;
  }
  #nav li:nth-of-type(4):hover ~ #lavalamp {
      left: 250px;
  }
  #nav li:nth-of-type(5):hover ~ #lavalamp {
      left: 330px;
  }
  #nav li:nth-of-type(6):hover ~ #lavalamp {
      left: 410px;
  }
  #nav li:nth-of-type(7):hover ~ #lavalamp {
      left: 490px;
  }
  #nav li:nth-of-type(8):hover ~ #lavalamp {
      left: 565px;
  }

   
• Lalu Simpan
• Setelah itu Copy Script Di bawah ini dan Paste kan pada Widget Blog sobat dengan cara Login Blogger>>Tata Letak>>Tambahkan Gadget>>HTML/javascript
  <div class="container">
              <ul id="nav">
                  <li><a href="/">Home</a></li>
                  <li><a class="hsubs" href="#">Menu 1</a>
                      <ul class="subs">
                          <li><a href="#">Submenu 1</a></li>
                          <li><a href="#">Submenu 2</a></li>
                          <li><a href="#">Submenu 3</a></li>
                          <li><a href="#">Submenu 4</a></li>
                          <li><a href="#">Submenu 5</a></li>
                      </ul>
                  </li>
                  <li><a class="hsubs" href="#">Menu 2</a>
                      <ul class="subs">
                          <li><a href="#">Submenu 2-1</a></li>
                          <li><a href="#">Submenu 2-2</a></li>
                          <li><a href="#">Submenu 2-3</a></li>
                          <li><a href="#">Submenu 2-4</a></li>
                          <li><a href="#">Submenu 2-5</a></li>
                          <li><a href="#">Submenu 2-6</a></li>
                          <li><a href="#">Submenu 2-7</a></li>
                          <li><a href="#">Submenu 2-8</a></li>
                      </ul>
                  </li>
                  <li><a class="hsubs" href="#">Menu 3</a>
                      <ul class="subs">
                          <li><a href="#">Submenu 3-1</a></li>
                          <li><a href="#">Submenu 3-2</a></li>
                          <li><a href="#">Submenu 3-3</a></li>
                          <li><a href="#">Submenu 3-4</a></li>
                          <li><a href="#">Submenu 3-5</a></li>
                      </ul>
                  </li>
                  <li><a href="#">Menu 4</a></li>
                  <li><a href="#">Menu 5</a></li>
                  <li><a href="#">Menu 6</a></li>
                  <li><a href="#">Back</a></li>
                  <div id="lavalamp"></div>
              </ul>
          </div>
  
• Lalu simpan
• Pastikan Gadget yang sobat tambahkan di simpan dengan tidak menambahkan judul
• Kemudian Posisikan Gadget sobat tergantung kemauan sobat, Bisa di bawah haeder atau di atas haeder.
• Setelah itu silahkan sobat Setting Atau Obrak Abrik Menu Bar sobat sesuai selera sobat, saya yakin sobat pasti bisa Menyettingnya jika sobat memperhatikannya kode scriptnya dengan cermat.
  
  Tambahan dari saya: kode "#" pada script di atas di ganti dengan Url label terserah sobat dan kata Menu atau SubMenu di atas di ganti dengan judul yang sobat inginkan.
• Selesai