Membuat Navigasi Fixed Header Diam Tak Bergerak Dengan CSS

Membuat Navigasi Fixed Header Diam Tak Bergerak Dengan CSS. Navigasi header adalah tempat memasang menu-menu penting yang terletak di atas konten blog. Di situ bisa di tempelkan link url halaman mandiri atau kelompok link label postingan.

Ada berbagai macam cara membuat navbar top header menjadi diam tidak bergerak. Ada yang menggunakan boostraps atau javascript. Namun di artikel ini Admin tidak menggunakan kedua cara tersebut. Di bawah nanti Admin akan bagikan cara yang paling simple hanya menggunakan kode CSS.

Kenapa menggunakan kode CSS..?. Dengan CSS akan lebih ringan dan tidak terlalu menggangu kecepatan loading blog. Sebab kode CSS-nya kita buat sendiri tanpa link pihak ketiga. Kalau menggunakan Boostraps, di wajibkan menggunakan link url dari situsnya. Dan inilah yang menjadikan SEO blog agak terganggu karena ada kode pihak ketiga.

Membuat Navbar Header Blog Fixed Tak Bergerak

Pada tutorial ini, Admin hanya akan membagikan kode CSS dan tata caranya saja. Admin tidak membagikan kode bentuk navigasinya. Sebab di blog kamu pastinya sudah ada menu navigasi header. Jadi kamu hanya tinggal membuat menu navbar tersebut menjadi diam tidak bergerak.

Apakah kode CSS-nya banyak dan panjang?. Oouh Tidak.. kodenya sangat sedikit dan simple banget. Pokoknya nanti tinggal Copy dan memasangnya di blog yang kamu cintai. Jadi, baca dulu artikel ini sampai sekesai, agar kamu bisa mengerti cara pemasangannya.

Membuat menu navigasi diam (fixed), paling tidak kamu harus pernah membuka kode HTML pada template yang kamu gunakan. Kalau kamu pengguna blogger/blogspot, cari saja menu Tema --> kemudian klik. Lalu cari menu Edit HTML dan klik. Di situ akan terbuka deretan kode-kode yang ada di dalam template kamu.

Dengan begitu, kamu akan mudah menerapkan cara yang akan Admin bagikan. Bagi yang masih pemula banget, hal ini memang wajar. Dan kalau mau belajar pastinya akan terbiasa dan familiar dengan kode-kode Html di template blogger.

Cara Memasang CSS Fixed Navigasi Header

Cara memasang kode CSS membuat top navigasi menjadi fixed (diam) yang paling simple. Dan ini tidak membutuhkan banyak script, cukup dengan susunan kode CSS yang sangat sedikit sudah bisa bikin navigasi header diam di tempat.

Jika nanti kamu sukses memasangnya, saat halaman artikel kamu scroll ke atas si Navigasi bar tersebut tidak mau ikutan ke atas. Pokoknya patuh deh dengan perintah boss CSS-nya. Di suruh berhenti di tempat ya berhenti tanpa membantah sedikitpun.

Nah tiba saatnya sekarang kamu Copy kode CSS di dalam kotak hijau lumut bawah ini.

/* Stat WapHTML Fixed NavBar */ #nav-waphtml {position:fixed;top:0px;left:0px;z-index:999;width:100%;} /* End WapHTML Fixed NavBar */

Proses selanjutnya, tempelkan kode CSS yang sudah di copy tersebut di atas kode </b:skin>. Nah, ternyata penting sekali ya menu "Edit Html" di blogger. Pokoknya kamu buka saja menu tersebut, lalu cari kode </b:skin>. Biasanya terletak pada kode-kode CSS berwarna biru. Dan tempelkan kode di atasnya.

Setelah menempelkan kode CSS, selanjutnya geser ke bawah dan cari kode Navigasi. Kode navbar memang berbeda-beda, tapi carilah kode seperti ini: <div id="nav"> atau yang mirip seperti itu. Lalu, Copy dan tempelkan kode di dalam kotak hijau lumut di bawah ini sebelum kode <div id="nav">.

<div id="nav-waphtml">

Langkah selanjutnya, tempel kode </div> tepat setelah kode </div> akhir dari kode navbar blog kamu.

Apabila masih bingung, lihat saja contoh di dalam kotak bawah ini.

<div id="nav-waphtml"><div id="nav">...Di sini adalah kode navigasi menu blog kamu, yang di akhiri dengan kode...</div>. Setelah itu kamu tempel lagi kode </div>

Setelah semua kode sudah terpasang dengan benar, selanjutnya kamu klik "Simpan". Dan selesai deh pemasangan kode CSS dan Html membuat navbar header fixed tidak bergerak kemana-mana.

Demikian tutorial singkat Membuat Navigasi Fixed Header Diam Dengan CSS. Semoga bermanfaat..