Cara membuat menu navigasi scroll horizontal

Faronesia.com  - Menu navigasi sebuah blog pada dasarnya berfungsi mempermudah user atau para membaca blog dalam mencari artikel yang di inginkan, dengan begitu interaksi antara pengguna dengan blog memiliki kesan positif bagi para pengguna. Selain itu, mempunyai menu navigasi yang rapi dan responsive serta friendly juga menambah nilai keprofesionalitas dimata pengguna. Sudah siap mempraktekkan tutorial kali ini? Sebelum itu simak penjelasannya dibawah ini.

Penerpan navigasi scroll ke samping mungkin hanya dapat kalian temukan di beberapa blog, karena memang penerapannya berbeda di tiap template blog. Admin sendiri menerapkan pada template besutan mas sugeng yang sudah populer dan familiyar dikalangan blogger yaitu Viomagz. Cara membuat/penerapan menu navigasi scroll ke samping bisa di bilang cukup mudah, hanya menambahkan beberapa code html dan css yang sudah admin sediakan untuk anda.

Seperti biasa, agar pemasangannya berjalan dengan lancar ada baiknya anda membackup template blog anda sebelum di modifikasi. Hal ini berguna untuk jaga-jaga jika anda salah menempelkan kode yang menyebabkan error pada template.

Cara membuat menu navigasi scroll kesamping

  • Masuk ke dashboard blog milik anda
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode </header> </div> lalu tambahkan kode dibawah ini tepat dibawah kode tadi
<div class='faronesia-scroll'>
  <ul>
   <li><a href='#' title='Label 1'>Label 1</a></li>
   <li><a href='#' title='Label 2'>Label 2</a></li>
   <li><a href='#' title='Label 3'>Label 3</a></li>
   <li><a href='#' title='Label 4'>Label 4</a></li>
   <li><a href='#' title='Label 5'>Label 5</a></li>
  </ul>
</div>
  • Jika ingin mengikuti dropdown menu utama maka letakkan kode html tadi tepat sebelum </header> </div>
  • Pada kode # diatas silahkan ganti dengan url yang anda inginkan, dan pada kata label diatas silahkan ganti dengan kata yang anda inginkan.
  • Selanjutnya tambahkan CSS Code berikut ini tepat diatas kode ]]></b:skin>
/* faronesia.com scroll samping */
.faronesia-scroll ul {
  background: linear-gradient(to right, #f39c12, #f9690e);
  max-width: 100%;
  overflow-x: auto;
}
.faronesia-scroll {
  color: #fff;
  line-height: 0px;
  overflow: hidden;
}
.faronesia-scroll a {
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  padding: 10px 13px;
  line-height: 1.5em;
  display: block;
  font-weight: bold;
}
.faronesia-scroll a:hover {
  background-color: rgba(0,0,0,.25);
  color: #fff;
  text-decoration: none;
}
.faronesia-scroll ul, .faronesia-scroll li {
  list-style: none;
  display: inline-block;
  white-space: nowrap;
  margin: 0px;
  padding: 0px;
}
@media screen and (max-width: 480px){
  .faronesia-scroll a {
    font-size: 13px;
    padding: 8px 11px;
  }
}
@media screen and (max-width: 360px){
  .faronesia-scroll a {
    font-size: 12px;
    padding: 7px 10px;
  }
}
  • Lalu simpan tema
Demo lihat dibawah ini
Semoga tutorial singkat Cara membuat menu navigasi scroll kesamping ini bermanfaat, jangan lupa share dan komentar dibawah.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel