Home Blog Cara Membuat menu navigasi drop down blogger

Cara Membuat menu navigasi drop down blogger

Cara Membuat menu navigasi drop down blogger

BLOG - Cara Membuat menu navigasi drop down blogger, menu navigasi berfungsi sebagai pengatur arah di blog. sangat perlu dan penting untuk menampilkan dan membuat menu navigasi. dalam membuat menu navigasi banyak cara yaitu dengan cara sederhana atau melakukan perombakan dalam tampilan menu navigasi misalkan menambahkan menu drop down.
Cara Membuat menu navigasi drop down blogger
Untuk membuat menu navigasi pada blogger sebetulnya gampang-gampang susah, jika menu navigasi hanya standar bawaan blogger, sangat mudah untuk menambahkannya. menu navigasi blog sama hal nya dengan menambahkan menu laman pada halaman utama blog. saya akan membahas kedua nya yaitu cara sederhana dan cara modifikasi melalui EDIT HTML.

CARA SEDERHANA MEMBUAT NAVIGASI BLOG

  1. Silahkan login terlebih dahulu ke blogger, klik login.
  2. Kemudian masuk ke bagian TATA LETAK, Klik TAMBAHKAN GADGET.
  3. Maka akan muncul JENDELA BARU, Pilih gadget LAMAN Seperti gambar dibawah ini :
  4. Kemudian akan tampil seperti gambar dibawah ini, ketika menambahkan gadget laman:
  5. Pilih laman atau menu yang akan ditampilkan di halaman utama sebagai menu navigasi, kemudian jika sudah jangan lupa untuk save.
CARA MEMBUAT MENU NAVIGASI EDIT HTML


1.  Masuk ke menut TEMA, Kemudian klik EDIT HTML.
2. Cari kode ]]></b:skin> Jika tidak ada cari kode </style>, kemudian copy kode di bawah ini dan letakkan DIATAS KODE  ]]></b:skin> atau </style> :

letakkan DIATAS KODE ]]></b:skin> atau </style>

/* kode css navigasi */

#cssmenu {
  position:relative;
  height: 44px;
  background: #2b2f3a;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
#cssmenu > ul {
  position: relative;
  display: block;
  background: #2b2f3a;
  height: 32px;
  width: 100%;
  z-index: 500;
}
#cssmenu > ul > li {
  display: block;
  position: relative;
  float:left;
  margin: 0px;
  padding: 0;
}
#cssmenu > ul > #menu-button {
  display: none;
}
#cssmenu ul li a {
  display: block;
  font-family: Helvetica, sans-serif;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  font-size: 14px;
  font-weight: bold;
  padding: 15px 20px;
  color: #7a8189;
  text-transform: uppercase;
  -webkit-transition: color 0.25s ease-out;
  -moz-transition: color 0.25s ease-out;
  -ms-transition: color 0.25s ease-out;
  -o-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu li.has-sub::after {
  display: block;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
#cssmenu > ul > li.has-sub::after {
  right: 10px;
  top: 20px;
  border: 5px solid transparent;
  border-top-color: #7a8189;
}
#cssmenu > ul > li:hover::after {
  border-top-color: #ffffff;
}
#indicatorContainer {
  position: absolute;
  height: 12px;
  width: 100%;
  bottom: 0px;
  overflow: hidden;
  z-index: -1;
}
#pIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  z-index: -2;
  -webkit-transition: left .25s ease;
  -moz-transition: left .25s ease;
  -ms-transition: left .25s ease;
  -o-transition: left .25s ease;
  transition: left .25s ease;
}
#cIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  top: -12px;
  right: 100%;
  z-index: -2;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  top: 70px;
  opacity: 0;
  -webkit-transition: opacity .3s ease, top .25s ease;
  -moz-transition: opacity .3s ease, top .25s ease;
  -ms-transition: opacity .3s ease, top .25s ease;
  -o-transition: opacity .3s ease, top .25s ease;
  transition: opacity .3s ease, top .25s ease;
  z-index: 1000;
}
#cssmenu ul ul ul {
  top: 37px;
  padding-left: 5px;
}
#cssmenu ul ul li {
  position: relative;
}
#cssmenu > ul > li:hover > ul {
  left: auto;
  top: 44px;
  opacity: 1;
}
#cssmenu ul ul li:hover > ul {
  left: 170px;
  top: 0;
  opacity: 1;
}
#cssmenu ul ul li a {
  width: 130px;
  border-bottom: 1px solid #eee;
  padding: 10px 20px;
  font-size: 12px;
  color: #9ea2a5;
  background: #fff;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -ms-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease;
}
#cssmenu ul ul li:hover > a {
  background: #f6f6f6;
  color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
  border-bottom: 0;
}
.submenuArrow {
  border: 6px solid transparent;
  width: 0;
  height: 0;
  border-bottom-color: #fff;
  position: absolute;
  top: -12px;
}
#cssmenu ul ul li.has-sub::after {
  border: 4px solid transparent;
  border-left-color: #9ea2a5;
  right: 10px;
  top: 12px;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu ul ul li.has-sub:hover::after {
  border-left-color: #fff;
  right: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: auto;
  }
  #cssmenu ul {
    width: auto;
  }
  #cssmenu .submenuArrow,
  #cssmenu #indicatorContainer {
    display: none;
  }
  #cssmenu > ul {
    height: auto;
    display: block;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu li,
  #cssmenu > ul > li {
    display: none;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu ul > li:hover > ul,
  #cssmenu ul ul > li:hover > ul {
    position: relative;
    left: auto;
    top: auto;
    opacity: 1;
    padding-left: 0;
  }
  #cssmenu ul .has-sub::after {
    display: none;
  }
  #cssmenu ul li a {
    padding: 12px 20px;
  }
  #cssmenu ul ul li a {
    border: 0;
    background: none;
    width: auto;
    padding: 8px 35px;
  }
  #cssmenu ul ul li:hover > a {
    background: none;
    color: #8c9195;
  }
  #cssmenu ul ul ul a {
    padding: 8px 50px;
  }
  #cssmenu ul ul ul ul a {
    padding: 8px 65px;
  }
  #cssmenu ul ul ul ul ul a {
    padding: 8px 80px;
  }
  #cssmenu ul ul ul ul ul ul a {
    padding: 8px 95px;
  }
  #cssmenu > ul > #menu-button {
    display: block;
    cursor: pointer;
  }
  #cssmenu #menu-button > a {
    padding: 14px 20px;
  }
  #cssmenu ul.open li,
  #cssmenu > ul.open > li {
    display: block;
  }
  #cssmenu > ul.open > li#menu-button > a {
    color: #fff;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
  }
  #cssmenu #menu-button::after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #7a8189;
    border-bottom: 2px solid #7a8189;
    right: 20px;
    top: 15px;
  }
  #cssmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #7a8189;
    right: 20px;
    top: 25px;
 
  }
  #cssmenu ul.open #menu-button::after,
  #cssmenu ul.open #menu-button::before {
    border-color: #fff;
  }
}

3. Langkah selanjutnya adalah meletakkan kode navigasinya, silahkan cari kode </header>, lalu copy kode dibawah ini dan letakkan DIATAS KODE </header>.


DIATAS KODE </header>
<!-- navigasi -->
    <link href='styles.css' rel='stylesheet' type='text/css'/>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

    <script src='menu_jquery.js' type='text/javascript'/>

<div id='cssmenu'>
   
<ul>

   <li class='active'><a href='http://www.wayhalom.com'><span>HOME</span></a></li>

   <li class='has-sub'><a href='Link'><span>BLOGGER</span></a>

      <ul>

         <li class='has-sub'><a href='http://www.wayhalom.com/p/blog-archive.html'><span>TIPS DAN TRIK</span></a>

         </li>

         <li class='has-sub'><a href='http://www.wayhalom.com/p/seo-archive.html'><span>SEO</span></a>

         </li>

         <li class='has-sub'><a href='http://www.wayhalom.com/p/adsense-archive.html'><span>ADSENSE</span></a>

         </li>

      </ul>

   </li>

   <li><a href='http://www.wayhalom.com/p/bitcoin-archive.html'><span>BITCOIN</span></a></li>

   <li class='last'><a href='Link'><span>GAME</span></a></li>
</ul>
   
</div>
<!-- ============================== -->

4. Lakukan PRATINJAU Terlebih dahulu sebelum MENYIMPAN. untuk berjaga-jaga kalau ada yang error.

Diatas adalah Cara Membuat menu navigasi drop down blogger, yang simpel atau dengan yang melalui edit html. terima kasih sudah berkunjung. silahkan kalau ada pertanyaan tinggalkan di kolom komentar.
More From Author