Cara Membuat Menu Navigasi di Blog Scroll Horisontal

masnasih.com - Dipostingan kali ini saya ingin berbagi Cara Membuat Menu Navigasi di Blog Scroll Horisontal. Jadi menu ini tetap horisontal dan otomatis membentuk scroll saat layar di kecilkan atau pengguna menggunakan hp. Menu navigasi semacam ini saya lihat di kalau tidak salah juga digunakan oleh website detik. Namun kode yang saya dapatkan ini bersumber dari w3schools.

Penampakannya seperti ini

Beranda Berita Kontak Kami Tentang Kami Dukungan Blog Peralatan Rumah Kostumisasi Lainnya Logo Teman Partners Orang Kerja

Di atas adalah menu scroll horisontal

Kecilkan ukuran browser untuk melihat hasilnya. Jika Anda menggunakan hp maka sudah bisa melihatnya

Baiklah langsung saja ke tutorialnya. 

Pertama masukkan kode di bawah ini ke posisi yang Anda inginkan. Diantara kode body

<div class="scrollmasnasih">
<a href="#Beranda">Beranda</a>
  <a href="#Berita">Berita</a>
  <a href="#KontakKami">Kontak Kami</a>
  <a href="#TentangKami">Tentang Kami</a>
  <a href="#Dukungan">Dukungan</a>
  <a href="#blog">Blog</a>
  <a href="#Peralatan">Peralatan</a>  
  <a href="#Rumah">Rumah</a>
  <a href="#kostumisasi">Kostumisasi</a>
  <a href="#lainnya">Lainnya</a>
  <a href="#logo">Logo</a>
  <a href="#teman">Teman</a>
  <a href="#partners">Partners</a>
  <a href="#orang">Orang</a>
  <a href="#kerja">Kerja</a>
</div>

Kedua, masukkan kode di bawah ini di atas  ]]></b:skin>

div.scrollmasnasih {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmasnasih a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmasnasih a:hover {
  background-color: #777;
}

Ketiga, Save template.

Demikianlah cara membuat menu navigasi scroll horisontal. Semoga bermanfaat.