Horizontal scrolling menu navigasi paling simpel dan paling responsif untuk Blogger

Namanya navigasi Horizontal scrolling atau bisa kita beri sebutan dengan: menu navigasi geser karena untuk melihat dan mengakses semua menu kita dapat menggeser scoll bar menu navigasi ke kanan dan ke kiri halaman blog. Bahkan halaman blog editblogtema kali ini juga sedang menggunakannya (dengan sedikit modifikasi pengaturan CSS). Teknik pemasangannya terbilang mudah sekali bahkan tanpa harus masuk ke dalam halaman editor HTML pada dasbor blogger, keunggulan menu ini jika di terapkan ke dalam template blogger adalah:

1. Ringan dan sederhana template akan menjadi lebih SEO berkat navigasi yang baik dan di mengerti dengan mudah oleh robot.txt.
2. Tidak menggunakan Javascript, tidak menjegal kecepatan bahkan tidak mempengaruhi kecepatan.
3. Dapat di terapkan ke template lama (layout versi 2) dan template baru (layout versi 3)
4. Responsif dan mobile, Jika kalian menggunakan widget pagelist sebagai menu pada template lama (layout versi 2) itu tidak responsif karena hanya cocok buat tampilan layar besar desktop. Namun navigasi menu model horisontal slidder ini sangat cocok buat segala ukuran layar.
5. Menu menu dapat di tambahkan tanpa batas dan jika ingin mengaksesnya tinggal di geser atau di scroll ke kiri dan ke kanan, baik pada tampilan antar muka halaman desktop, laptop, tablet maupun smartphone.

Keuntungan memiliki navigasi menu horizontal scrolling:

• Halaman blog menjadi menarik dan lebih SEO
• Lebih mudah mendapatkan kotak penelusuran sitelink
• Memudahkan pengunjung dalam mempetakan konten konten yang mereka cari
• Tampak simple dan mudah di mengerti.

Cara membuatnya:

Langkah pertama: Tambahkan CSS melalui pengaturan dasbor Blogger.

1. Masuk ke pengaturan blogger
2. Pilih Tema atau Theme
3. Pilih dan klik sesuaikan atau Customise
4. Pilih lanjutan atau Advanced
5. Klik Advanced dibawahnya akan muncul menu scroll ke atas sampai bertemu dengan Tambahkan CSS (atau 'Add CSS)
6. Pastekan kode berikut ke dalam blanko atau lajur CSS tersebut:

div.scrollmenu {
background-color: #0066CC;
overflow: auto;
white-space: nowrap;
}

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

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

Perhatikan gambar:

Contoh cara menambahkan kode css ke dalam kolom CSS tersebut:

Save template.

Note: Kalian dapat merobah warna latar (background) navbar dengan merobah kode warna yang saya tandai warna merah di atas.

Langkah Kedua: Tambahkan HTML ke dalam widget bloger HTML/Javascript.

1. Masuk kembali kepengaturan dasbor blogger.
2. Pilih pengaturan/layout
3. Pilih Tambahkan widget
4. Pilih Widget 'HTML/Javascript'
5. Masukan kode berikut kedalam blanko kosongnya:

<div class="scrollmenu">
<a href="#Beranda">Beranda</a>
<a href="#Perihal">Perihal</a>
<a href="#Privasi">Privasi</a>
<a href="#Kontak">Kontak</a>
<a href="#Teknologi">Teknologi</a>
<a href="#Travelling">Travelling</a>
<a href="#Link1">link1</a>
<a href="#Link2">Link2</a>
<a href="#Link3">Link3</a>
<a href="#Link4">Link4</a>
<a href="#Link5">Link5</a>
<a href="#Link6">Link6</a>
<a href="#Link7">Link7</a>
<a href="#Link8">Link8</a>
<a href="#Link9">Link9</a>
</div>

Ikuti Petunjuk:

Silahkan robah setiap judul menu, contoh 'perihal' menjadi teknologi dan tulisan warna merah di robah menjadi link judul menu tersebut <a href="#Perihal">Perihal</a> (misalnya) menjadi: 

<a href="www.websaya.com">websaya</a> 

Jika sudah menggunakan jenis Navigasi scroll horisontal, silahkan hapus widget halaman (widget page) yang mungkin masih terpasang pada layout dasbor blogger, dan geser widget menu navigasi scroll horisontal yang kita buat tadi tepat ke atas widget 'Postingan Blog' atau di atas widget entri yang di unggulkan jika widget entri yang di unggulkan tersebut tepat berada di atas widget 'Postingan Blog'. Perhatikan gambar:

Kini kalian telah sukses membuat sebuah menu blogger yang sederhana namun keren. Cara kerja menu adalah agar dapat mengakses keseluruhan menu di haruskan menggeser menu menu ke kiri dan ke kanan halaman. 

Lihat saat navigasi scroll horisontal ini kami terapkan ke template contempo:

DEMO

Darimana mendapatkan sumber kodenya? Dengan mengopreknya melalui halaman w3school. Silahkan kunjungi:

HORIZONTAL SCROLLABLE MENU

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: