Home blogger template triks Cara menghilangkan efek sticky header pada template versi terbaru blogger. Template template terbaru blogspot berikut semuanya memiliki sticky header seperti: Contempo, Emporio, Soho, Notable dan Essentials.
Sticky artinya 'lengket'.
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.
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.
Sebaliknya Anda mungkin tidak tertarik dengan tampilan template Suara Harian Oto Bemo Beroda Tiga | Theme Notable. Saya hanya perduli pada perfomanya. Dan itu cukup imbas dengan jerih payah saya mengkebiri 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;
YOI ! 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;
}
NAMUN STICKY INI JUGA TELAH GAGAL TIDAK BERKERJA
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;
NAMUN STICKY INI JUGA TELAH GAGAL TIDAK BERKERJA
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 tidak 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.
Tutorial ini merupakan perbaikan sekaligus menjawab segala kebingungan blogger dari setelah otak-atik template terbaru Contempo, Emporio, Soho, Notable dan Essentials yang ketika halaman digulir kebawah keatas. Sticky template terbaru akan melewati footer wrapper dan itu sedikit mengganggu konten karena lengket atau membeku, alias tidak normal sediakala. Baca Juga : Komunikasi-transendal
Nah untuk itu hasil eksperimen saya ini terbukti muzarab sekali dan ingin berbagi pengalaman dari praktik uji template terbaru, maka kode yang saya bagikan ini adalah lebih cocok dipasang pada semua template terbaru diheader sebagai berikut :
1. Masuk ke Blogger.com
2. Klik Template > Edit HTML
3. Silahkan copas kode css di bawah ini, lalu letakan di atas kode ]]></b:skin>
4. Lalu klik Simpan tema.
Untuk Notable kode CSS nya
.status-msg-wrap{ display:none; }
.centered-top-container.sticky { position: none !important;
Untuk Contempo, Emporio, Soho, dan Essentials kode CSS nya
.status-msg-wrap{ display:none; }
.centered-top-container.sticky { position: fixed !important; }
Jadi sekarang anda mengerti dan memahami bagaimana istilah lengket. Bukan cinta yang lengket hehehe
Komentar
Posting Komentar
SILAKAN KOMENTAR SESUAI TOPIK.....