Cara Membuat Menu Navigasi Blog yang Bisa di Scroll Kesamping

Cara mudah membuat menu navigasi yang bisa digeser/scroll kesamping di tampilan mobile dan desktop di Blogger.

Kamu mungkin menjumpai tampilan menu navigasi yang bisa di scroll pada Google versi mobile, Kaskus dan juga pada template Textrim.

Untuk membuatnya, kamu gak perlu untuk coding sendiri, karena saya sudah membuat codingannya berikut ini untukmu, jadi kamu cukup copy paste aja dan bisa juga dimodifikasi sesuai keinginan.

Membuat Menu Navigasi Scrolling di Blog

Kode HTML:

<div class="codefen">
  <a href="#home">Home</a>
  <a href="#">Menu 1</a>
  <a href="#">Menu 2</a>
  <a href="#">Menu 3</a>
  <a href="#">Menu 4</a>
  <a href="#">Menu 5</a>
  <a href="#">Menu 6</a>  
  <a href="#">Menu 7</a>
  <a href="#">Menu 8</a>
  <a href="#">Menu 9</a>
  <a href="#">Menu 10</a>
  <a href="#">Menu 11</a>
  <a href="#">Menu 12</a>
  <a href="#">Menu 13</a>
  <a href="#">Menu 14</a>
</div>

Agar menu bisa digeser kesamping, maka selanjutnya adalah menambahkan kode CSS:

div.codefen {
  overflow: auto;
  background: #4285f4;
  white-space: nowrap;
}

div.codefen a {
  display: inline-block;
  color: #fff;
  text-align: center;
  padding: 10px 15px 7px;
  border-bottom: 3px solid transparent;
  text-decoration: none;
}

div.codefen a:hover {
  border-bottom: 3px solid #fff;
}

Jika kamu menggunakan Blogger / Blogspot, Letakan kode CSS pada edit HTML tema pada bagian sebelum ]]</b:skin>

Lihat langsung hasilnya di Codepen

Demikianlah tutorial membuat menu navigasi yang dapat di scroll kesamping di blog, jika ada pertanyaan silahkan sampaikan di kolom komentar.

Share this post