Cara menghilangkan efek sticky header pada template versi terbaru blogger

Template template terbaru blogspot berikut semuanya memiliki sticky header:
  1. Contempo
  2. Emporio
  3. Soho
  4. Notable
  5. Essentials
Sticky artinya 'lengket' ya memang efeknya begitu. 

Karena ketika halaman di scroll ke atas seluruh halaman ikut naik, namun ketika halaman di scroll kebawah header bagian atas (kepala) blogger blogspot seolah melipat dan tertinggal dan baru berhenti pada saat halaman selesai di scroll alias sudah sampai batas paling atas halaman.

contempo default dengan sticky header

Sticky itu sebenarnya keren, tetapi tergantung selera juga sih. Misalnya alih alih sekedar lengket, banyak juga pengguna menginginkan header blog atau halaman web mereka 'fixed' alias tetap di atas walau halaman blog atau web mereka di scroll oleh pengguna naik turun. Contohnya halaman blog ini. Mungkin tidak pada semua browser, paling tidak kini kita tahu pengguna memiliki selera mereka masing masing. 

Cantik dan tidak cantik adalah subjektif. Saya tidak pernah bilang template Anda jelek, hanya saja itu bukan tipe saya. Sebaliknya Anda mungkin tidak tertarik dengan tampilan template template buatan saya. Saya hanya perduli pada perfomanya. Dan itu cukup imbas dengan jerih payah saya menyusun kode kodenya.

Jika Anda tidak menyukai efek sticky dan ingin menghilangkannya pada saat menggunakan 5 varian template terbaru seperti yang kita cantumkan dalam daftar di atas, sumber kodenya adalah:
.centered-top-container.sticky{
left:0;
position:fixed;
right:0;
top:-0;
width:auto;
Mari bermain main sebentar, itu adalah CSS dan template modern itu adalah template CSS. CSS dapat memanipulasi prilaku HTML asalkan sesuai dengan ID dan class-classnya masing masing. Dan terlalu panjang jika saya harus menjabarkan detailnya. Cukup fokus pada sumber kode di atas. Jika Anda merobah sedikit saja kodenya, maka ke lima varian template di atas akan kehilangan kemampuan stickynya.

Perhatikan baik baik dua kode yang saya merahkan, pilih salah satu untuk di robah, misalnya:
.centered-top-container.sticky{
left:0;
position:relative;
right:0;
top:0;
width:auto;
Yihuu! Saya mengganti fixed menjadi relative dan apa yang terjadi? Efek sticky langsung menghilang! Mari kita coba cara lain, alih alih merubah fixed menjadi relative:
.centered-top-container.sticky{
left:0;
position:fixed;
right:0;
top:-10;
width:auto;

Saya merobah nilai NOL (0) menjadi -10 dan apa yang terjadi?

Ternyata efek sticky header langsung menghilang!

Mengapa Anda harus melakukan cara ini?

Karena selama ini para pakar menyarankan agar menghilangkan sticky header melalui cara memasukan kode ini ke dalam kotak CSS, atau meletakannya di atas kode ]]></b:skin>:

.centered-top-container.sticky {
display: none !important;
Tunggu, saya ingin mengingatkan: Kode CSS diatas adalah overrade alias over-write alias...selamanya saya tidak pernah menyukainya karena ia menambah beban pada template. Perintah pengaturan itu memang efektif menghentikan efek sticky pada template template ini, akan tetapi...

Camkan baik baik Anda tidak seharusnya menghentikan:

.centered-top-container.sticky {

Lalu Anda di suruh menambahkan kode pengaturan berikut di bawahnya:

display: none !important;
Secara keseluruhan itu memaksa top container header berhenti bekerja! Dan terbukti setelah Anda melakukannya Tombol menu jadi 'frozen' alias membeku alias kehilangan fungsinya, alias tidak bekerja lagi. Mengapa? Karena ia satu paket dalam 'container yang sama! 

Bukan hanya tombol menu disana juga berada tombol pencarian menjadi satu paket dalam kontainer yang sama, tombol pencarian juga jadi tidak berfungsi.

Jadi sekarang Anda tahu itu adalah sebuah kesalahan bukan?

Anda dapat mengcopy kode diatas, yang saya maksudkan adalah sumber kode sticky yang telah kita modifikasi tadi dan meletakannya ke dalam kotak CSS atau meletakannya ke atas kode ]]></b:skin> Dan itu pasti akan bekerja dengan sempurna.

Tapi tentu saja sumber kode di atas hanya kompitabel dengan template template varian terbaru blogger. Karena pastinya, template template varian lama alias template template yang sudah tua tidak memiliki fungsi sticky header alias lengket kepala ini.

Kunjungi halaman yang kami buat menggunakan template essentials ini:


Selamat mencoba!

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

3 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Keren gan, ini langka.Terimakasih sudah berbagi

    BalasHapus
  2. Bagaimana kalau begini Del?

    .sticky {
    display: none !important;
    }

    BalasHapus
    Balasan
    1. Sama saja cara pertama tu...overrade. ada fungsi pada header container yang akan jadi 'frozen'

      Hapus
Lebih baru Lebih lama

Formulir Kontak