×

search by faronesia.com

FARONESIA.COM
Profesional and Specialist WebDesign

Unduh dan dapatkan template blogger terbaik mulai dari premium hingga gratis tersedia di Faronesia.com

Unduh sekarang

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.
Buka komentar
Tutup komentar
  1. Ilmu baru nih, makasih gan langsung tak coba di blog saya yg baru

    BalasHapus
  2. Anonim14.51

    Menu nya ketutupan gan bagaimana ngatasinnya

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Developer

test-1 test-2
Saya adalah seorang Web Designer dan Front-End Developer, 5 tahun dalam pengalaman bermain coding sejak SMA. Pemilik Blog Faronesia sekaligus Desainer Template Blogger.

azza / owner faronesia
Saya adalah mahasiswi sekaligus penulis lepas di sela-sela kesibukan saya. Penulis Faronesia sekaligus penyempurna naskah artikel.

shofi / author faronesia
Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup