Horizontal scrolling menu navigasi paling simpel dan paling responsif untuk Blogger

horizontal scrollable menuNamanya 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:
  7. 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:

    pemasangan navigasi menu horisontal scroll pada blog

Contoh cara menambahkan kode css ke dalam kolom CSS tersebut:
contoh penempatan CSS ke dalam kolom widget CSS blogger

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:
  6. <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:

posisi widget navigasi menu scroll horisontal

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:


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


Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:
adelina sofyan
I am just an ordinary, and when everything comes, like a plenty of leaves fall, I will not leave it behind me.. I am a student of Senior high school in Bandar Lampung

7 komentar

  1. halo mas apa kabar ?

    lagi-lagi ilmu daging nih, salut dengan mas karena bisa mempelajari script blogspot sampai sekarang, he-he

    BalasHapus
    Balasan
    1. Wah Lee Kuan Yu hadir kembali, piyekabari kemana saja selama ini?

      Hapus
    2. Lee Kuan Yu habis schedule shooting panjang, maaas ...
      Jadi lakon pemeran jagoan dari Korea :)

      Hapus
    3. ha-ha, mas hima bisa aja

      kabar baik mas sofyan, ngomong-ngomong blogger dulu udah sedikit ya, sekarang udah banyak yang baru

      Hapus
  2. Setiapkali datang kesini, pasti dibuat kagum baca penjelasan proses pengkodean.
    Kali ini yang dibahas horizontal scrolling.
    Terimakasih ilmunya.

    BalasHapus
    Balasan
    1. Masing masing halaman blog pasti memiliki ciri ciri dan kelebihan, misalnya halaman: Yuk, dibaca!

      Hapus
    2. kalau ada yang amp sepertinya makin menarik nih mas, he-he

      Hapus

Posting Komentar

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE