membuat menu slide di bawah header

navigator bar slider in blogger pure css - Hai dipertemuan kali ini dionzi akan membagikan tutorial cara membuat menu navigasi slide atau scroll samping murni dengan CSS tanpa tambahan JavaScript.

Menu navigasi scroll samping blogger

Navigasi ini sering di jumpai pada website website berita yang bertujuan memperluas jangkauan pembaca melalui navigasi yang diberikan.

Menu navigasi ini biasanya diletakkan tepat di bawah header blog agar dapat terlihat dengan jelas pada saat pembaca mengunjungi blog.

Untuk contohnya bisa lihat DEMO INI. Jika tertarik langsung saja ke tutorial di bawah ini. Gassss Baca Juga : Cara membuat contact form blogger 100% work

Cara membuat menu slide di bawah header

Pertama letakkan kode di bawah ini tapat dimana kamu ingin meletakkan menu navigasinya.

<!-- Navigation by dionzi.com -->
<div class="dionziNav">
  <ul>
    <li><a href="#" title="Download">Download</a></a></li>
    <li><a href="#" title="Tutorial">Tutorial</a></li>
    <li><a href="#" title="Video">Video</a></li>
    <li><a href="#" title="Subscribe">Subscribe</a></li>
    <li><a href="#" title="HTML5">HTML5</a></li>
    <li><a href="#" title="CSS3">CSS3</a></li>
    <li><a href="#" title="Javascript">Javascript</a></li>
    <li><a href="#" title="Make Money Online">Make Money Online</a></li>
    <li><a href="#" title="Study Case">Study Case</a></li>
  </ul>
</div>

Langkah kedua simpan CSS dibawah ini untuk mempercantik tampilan.

/*  Navigation by dionzi.com */
.dionziNav ul {
  background-color: #865243; /* Warna background menu */
  max-width: 100%; /* Lebar maksimal menu */
  overflow-x: auto;
}
.dionziNav {
  color: #fff;
  line-height: 0px;
  overflow: hidden;
}
.dionziNav a {
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  padding: 10px 13px;
  line-height: 1.5em;
  display: block;
}
.dionziNav a:hover {
  background-color: rgba(0,0,0,.25);
  color: #fff;
  text-decoration: none;
}
.dionziNav ul, .dionziNav li {
  list-style: none;
  display: inline-block;
  white-space: nowrap;
  margin: 0px;
  padding: 0px;
}
@media screen and (max-width: 480px){
  .dionziNav a {
    font-size: 13px;
    padding: 8px 11px;
  }
}
@media screen and (max-width: 360px){
  .dionziNav a {
    font-size: 12px;
    padding: 7px 10px;
  }
}

Anda bisa mengganti warna dan lain sebagainya sesuai petunjuk yang saya jelaskan pada CSS.

Akhir Kata

Oke itu saja tutorial singkat cara membuat menu navigasil slide atau scroll samping pada blogger, next mau tutorial apa lagi?

www.dionzi.com