Langsung ke konten utama

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:

Komentar

  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

Posting Komentar

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Hal ini terjadi pada tema editblogtema yang pada saat itu kami modifikasi untuk sementara berdasarkan tema sederhana bawaan blogger. Karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal postingan sudah terlanjur di publish. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering atau Numbered List dan Add Bullets atau Bulleted List" yang tidak bekerja. Sudah tentu ini pasti celah kelemahan template, jadi harus segera di perbaiki. Padahal kami tidak membuat template baru, lho. Hanya memodifikasi template tua bawaan dengan tajuk simple atau 'sederhana'. Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tersebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau li

PERIHAL GOOGLE PAGERANK dan ranking ALEXA

GOOGLE PAGERANK K alau dengan Google Pagerank jadi ingat saat membuka blogger tahun 2014 waktu itu Blog dengan Google Pagerank tinggi benar benar dijadikan "primadona"nya blogspot. Namun apa yang terjadi segalanya berubah. Google telah melakukan update algoritmanya secara besar besaran, dan kini walaupun pagerank masih penting namun telah berubah menjadi rahasia dapurnya Google. Selama bertahun tahun Google PageRank telah menjadi benchmark yang penting untuk menilai kualitas suatu website namun  pada April 2016 menjadi bulan yang penuh dengan kehebohan bagi komunitas pemasaran digital pada umumnya dan SEO (Search Engine Optimization) khususnya. Berbagai website dan blog terkemuka SEO sedunia banyak yang memberikan komentar mengenai hal tersebut. SearchEngineLand menyebutkan bahwa sejak Jumat, 15 April 2016, tiba tiba saja Google PageRank lenyap dari Google Toolbar! MASIH PENTINGKAH GOOGLE PAGERANK ITU? Ada yang berpendapat Google pagerank masih penting, tetapi tidak

JARINGAN INTERNET DAN TELEKOMUNIKASI TELKOMSEL RUSAK, PELANGGAN SANGAT DI RUGIKAN

Hey teman teman,  Aku di Indonesia sempat mau bikin konten tutorial dan itu seharusnya berjalan dengan baik, kalau tiba tiba saja jaringan internet tidak 'rusak'. Parahnya di tunggu berjam jam tidak juga aktif dari pukul satu atau pukul dua siang tadi. Mood aku buyar, karena ketika aku mendapatkan internet kembali draft aku sudah hilang separoh karena tidak ter-'save' pada saat internet hancur lebur tadi.  Sebagai gantinya aku menulis curhatan ini, maaf ya telkomsel, aku tidak menggunakan jaringan internetmu yang mahal, aku menulis sisi burukmu ini melalui jaringan internet Indosat. Kamu pasti mengerti mengapa aku marah. Karena jaringan internet terputus hingga sore tidak ada tanda tanda kehidupan. Awalnya aku menyangka karena quota internet sudah habis atau kartu halo belum bayar ya...eh gak mungkin! Tanya sama teman teman yang rata rata pengguna telkomsel. Yaaah sama. Mau tidak mau kalau masih terhubung harus beli kartu internet dari operator lain INDOSAT. Benar, dapa