Wednesday, April 29, 2020

Home › Aplikasi › Lain-Lain › Script › Tips

CARA MEMBUAT MENU NAVIGASI DI BLOGGER

Nurul April 29, 2020 Leave a Reply

Assalamualaikum wr wb...

Kali ini saya akan bahas tentang bagaimana Cara membuat menu navigasi di blogger. Tujuan membuat menu navigasi ini yaitu untuk memudahkan pengunjung mencari artikel berdasarkan penggolongan yang anda buat.

Oke langsung saja ke cara pembuatannya ya..

Masuk ke blogger anda terlebih dahulu kemudian pilih theme lalu klik Edit HTML.
Selanjutnya cari kode ]]></b:skin> kemudian pastekan kode dibawah ini tepat di atasnya.

<style>
#cssku {
  position: relative;
  height: 44px;
  background: #156004;
  width: auto;
}
#cssku ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
#cssku > ul {
  position: relative;
  display: block;
  background: #156004;
  height: 32px;
  width: 100%;
  z-index: 500;
}
#cssku > ul > li {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
#cssku > ul > #menu-button {
  display: none;
}
#cssku ul li a {
  display: block;
  font-family: Helvetica, sans-serif;
  text-decoration: none;
}
#cssku > ul > li > a {
  font-size: 14px;
  font-weight: bold;
  padding: 15px 20px;
  color: #fff;
  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;
}
#cssku > ul > li.has-sub > a {
  padding-right: 32px;
}
#cssku > ul > li:hover > a {
  color: #ffffff;
  background: #000;
}
#cssku li.has-sub::after {
  display: block;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
#cssku > ul > li.has-sub::after {
  right: 10px;
  top: 20px;
  border: 5px solid transparent;
  border-top-color: #7a8189;
}
#cssku > 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;
}
#cssku 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; 
}
#cssku ul ul ul {
  top: 37px;
  padding-left: 5px;
}
#cssku ul ul li {
  position: relative; 
}
#cssku > ul > li:hover > ul {
  left: auto;
  top: 44px;
  opacity: 1; 
}
#cssku ul ul li:hover > ul {
  left: 170px;
  top: 0;
  opacity: 1;
}
#cssku ul ul li a {   
  width: 130px;
  border-bottom: 1px solid #eee;
  padding: 10px 20px;
  font-size: 12px;
  color: #fff;
  background: #156004;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -ms-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease; 
}
#cssku ul ul li:hover > a {
  background: #000;
  color: #fff;
}
#cssku ul ul li:last-child > a,
#cssku 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;
}
#cssku 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;
}
#cssku 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) {
  #cssku {
    width: auto;
  }
  #cssku ul {
    width: auto;
  }
  #cssku .submenuArrow,
  #cssku #indicatorContainer {
    display: none;
  }
  #cssku > ul {
    height: auto;
    display: block;
  }
  #cssku > ul > li {
    float: none;
  }
  #cssku li,
  #cssku > ul > li {
    display: none;
  }
  #cssku ul ul,
  #cssku ul ul ul,
  #cssku ul > li:hover > ul,
  #cssku ul ul > li:hover > ul {
    position: relative;
    left: auto;
    top: auto;
    opacity: 1;
    padding-left: 0;
  }
  #cssku ul .has-sub::after {
    display: none;
  }
  #cssku ul li a {
    padding: 12px 20px;
  }
  #cssku ul ul li a {
    border: 0;
    background: none;
    width: auto;
    padding: 8px 35px;
  }
  #cssku ul ul li:hover > a {
    background: none;
    color: #8c9195;
  }
  #cssku ul ul ul a {
    padding: 8px 50px;
  }
  #cssku ul ul ul ul a {
    padding: 8px 65px;
  }
  #cssku ul ul ul ul ul a {
    padding: 8px 80px;
  }
  #cssku ul ul ul ul ul ul a {
    padding: 8px 95px;
  }
  #cssku > ul > #menu-button {
    display: block;
    cursor: pointer;
  }
  #cssku #menu-button > a {
    padding: 14px 20px;
  }
  #cssku ul.open li,
  #cssku > ul.open > li {
    display: block;
  }
  #cssku > ul.open > li#menu-button > a {
    color: #fff;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
  }
  #cssku #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;
  }
  #cssku #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #7a8189;
    right: 20px;
    top: 25px;
  }
  #cssku ul.open #menu-button::after,
  #cssku ul.open #menu-button::before {
    border-color: #fff;
  }
}
</style>

Langkah selanjutnya masuk ke Tata Letak kemudian klik Tambahkan Gadget lalu tambahkan HTML/Javascript kemudian pastekan kode dibawah ini:

<div id='cssku'>
<ul>
<li class='active'><a href='Link'><span>Home</span></a></li>
<li><a href='Link'><span>Profil</span></a></li>
<li class='has-sub'><a href='Link'><span>Tema1</span></a>
<ul>
<li class='has-sub'><a href='Link'><span>Subtema1</span></a></li>
<li class='has-sub'><a href='Link'><span>Subtema2</span></a></li>
<li class='last'><a href='Link'><span>Subtema3</span></a></li>
<li class='last'><a href='Link'><span>Subtema4</span></a></li>
<li class='last'><a href='Link'><span>Subtema5</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Link'><span>Tema2</span></a>
<ul>
<li class='has-sub'><a href='Link'><span>Subtema1</span></a></li>
<li class='has-sub'><a href='Link'><span>Subtema2</span></a></li>
<li class='last'><a href='Link'><span>Subtema3</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Link'><span>Tema3</span></a>
<ul>
<li class='has-sub'><a href='Link'><span>Subtema1</span></a></li>
<li class='has-sub'><a href='Link'><span>Subtema2</span></a></li>
<li class='last'><a href='Link'><span>Subtema3</span></a></li>
<li class='last'><a href='Link'><span>Subtema4</span></a></li>
</ul>
</li>
<li class='last'><a href='Link'><span>Tema4</span></a></li>
</ul>
</div>

Isi bagian Link sesuai dengan yang akan anda terapkan.
Kata-kata Home, Profil, Tema1, Tema2, Tema3 dan Tema4 dapat anda sesuaikan dengan kata yang ingin anda terapkan.
Selanjutnya Simpan dan letakan widget tersebut diatas letak posting dengan cara drag widget tersebut.
Jika sudah silahkan lihat tampilannya. Selamat mencoba.

Sekian dari saya tentang Cara Membuat Menu Navigasi di Blogger. Jika ada yang kurang jelas silahkan tanyakan melalui kolom komentar. Semoga bermanfaat.

Wassalamualaikum wr wb...

Tags: Aplikasi Lain-Lain Script Tips

Nurul

0 comments: