CARA MENGHILANGKAN EFEK LENGKET PADA STICKY HEADER KHUSUS TEMPLATE VERSI TERBARU CARA MENGHILANGKAN EFEK LENGKET PADA STICKY HEADER KHUSUS TEMPLATE VERSI TERBARU - SUARA HARIAN OTO BEMO BERODA TIGA
Suara Harian Oto Bemo Beroda Tiga

Komunikasi, Media Ilmu & Pengetahuan Umum Blogging

Langsung ke konten utama

"OTO BEMO.. OTO BEMO.. BERODA TIGA .. TEMPAT BERHENTI.. DITENGAH TENGAH KOTA..PANGGIL NONA..PANGGIL NONA..NAIK KERETA..NONA BILANG..TIDAK PUNYA UANG.. JALAN KAKI SAJA"

CARA MENGHILANGKAN EFEK LENGKET PADA STICKY HEADER KHUSUS TEMPLATE VERSI TERBARU

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 : 

Okey langsung aja berikut caranya

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



Bagaimana Reaksi Anda Tentang Artikel Ini?

Komentar

POPULAR POST

KOMUNIKASI TRANSENDAL, KOMUNIKASI DENGAN TUHAN

TANYA: Kang mau tanya, komunikasi dengan Tuhan Allah SWT disebut apa ya dalam ilmu komunikasi? JAWAB: Setahu saya, komunikasi dengan Tuhan disebut komunikasi transedental (transcendental communication), yaitu komunikasi dengan audiens atau komunikan yang gaib (tidak terlihat). Tegasnya, komunikasi transendental adalah komunikasi yang berlangsung antara diri kita dengan sesuatu yang gaib. Yang Mahagaib –dalam perspektif Islam– adalah Allah SWT, Tuhan Semesta Alam (Rabbul’ Alamin), Komunikasi dengan makhluk gaib seperti jin juga disebut komunikasi transedental. Namun, ulasan tentang komunikasi berdimensi personal dan vertikal ini lebih mengarah pada komunikasi personal seseorang dengan Tuhannya. Kaum muslim berkomunikasi dengan Allah SWT setiap hari, khususnya dalam shalat lima waktu plus dzikir dan doa-doa lainnya. Baca Juga :  Syaikh-abdul-qadir-al-jailani Setiap kali baca doa, dzikir, mengucapkan kalimah thayibah (tasbih, tahmid, takbir, tahlil) juga termasuk komunikasi transenden...

TENTANG RUH-2

5. Ruh Nurani : Ruh ini bagian dari Ruh Idhofi. Ruh Nurani ini bersifat Cahaya. Ruh Nurani adalah hakikat manusia yang disimpan di dalam lubuk hati. Alat dari Ruh Nurani adalah qolbu berdasarkan ayat Alqur'an dalam surah As-Sajdah (32) ayat 9 : "Kemudian Dia menyempurnakannya "dan" meniupkan kepadanya Ruh (Ciptaan)-Nya dan Dia menjadikan bagi kamu pendengaran, penglihatan dan  h a t i. (QS. 32 As-sajdah : 9). Baca Juga :  Tentang-ruh Menurut para sufi hati yang bersifat nurani adalah sebagai  wadah atau  sumber  ma'rifat (ma'rifat qalbiyah). Yakni hati sebagai alat untuk memperoleh sumber pengetahuan Ilahi. Berdasarkan ayat Alqur'an : "Mereka mempunyai hati, tetapi tidak dipergunakan memahamiNYA." (QS Al-A'raaf: 179) Bila Ruh nuraninya bisa bersambung di alam lahut alam ma’rifat atau alam tertinggi. Maka Ruh inilah yang mampu berhubungan dengan Allah. Sebagaimana Allah berfirman dalam hadits Qudsyi : "T...

ENAM TIPS MENJADI PEMIMPIN YANG DISUKAI DAN DISEGANI

TUNJUKKAN 1. Disiplin Kedisiplinan dalam mengatur waktu terdengar seperti hal sepele, namun harus selalu Anda jaga. Anda harus menghargai waktu kerja sehingga dapat menjadi teladan bagi karyawan Anda. Disiplin dengan waktu bisa berhubungan dengan tidak telat datang ke kantor dan rapat, termasuk tepat waktu ketika menyelesaikan pekerjaan. Jika Anda bisa disiplin, otomatis karyawan Anda terdorong untuk mengikuti ritme kerja Anda yang selalu menghargai waktu. 2. Terbuka Pemimpin yang bijaksana mau bersikap terbuka ketika berdiskusi. Anda menganggap karyawan Anda sebagai tim yang berhak mengutarakan kritik dan saran. Dengan bersikap terbuka, Anda membuat bawahan Anda ingin berkontribusi secara positif dalam mengeluarkan ide-ide cemerlang untuk kepentingan bersama. Lagipula, pemimpin juga manusia biasa. Karyawan Anda tentu memiliki kemampuan dan pengetahuan yang tidak Anda miliki. Untuk itu, selalu berikan kesempatan untuk bawahan Anda menyampaikan pendap...

MENJAGA HARAPAN AGAR TIDAK PUTUS ASA

Gagal dalam berusaha adalah hal biasa. Namun, kegagalan tidak mudah dilalui oleh orang-orang yang kurang memiliki mental tangguh. Akibat, mereka mudah berputus asa atau putus harapan. Seorang pasti mengalami kegagalan. Hanya saja, perbedaan antara orang satu dengan yang lain ialah cara menyikapi. Apakah anda terus meratap atau mengeluh maka keberhasilan akan datang ? tentu saja ada jalan lain yang jauh lebih indah dari pada putus asa. Putus asa atau putus harapan adalah sebuah kondisi psikologis dan kejiwaan seorang pekerja dimana dirinya merasa, berfikir, dan menganggap sesuatu yang menjadi target dan tujuan di masa depan mustahil tercapai. Penyebab timbulnya rasa putus asa dipicu oleh dua factor, yaitu secara internal dan eksternal. Factor internal ialah penyebab yang timbul dari dalam diri, yakni terjadi kesenjangan antara harapan dan kenyataan. Hal ini disebabkan oleh sumber daya yang dimiliki kurang memadai untuk mencapai tujuan. Factor eksternal ialah beberapa peny...

CARA MENYEMBUNYIKAN BACKLINK DARI AHREFS, SEMRUSH, MOZ DAN MAJECTIC DARI INTIPAN

Pada postingan kali ini saya akan berbagi tips memblokir perayapan bot crawl dari alat-alat SEO seperti ahrefs, majestic, moz dan semrush yang biasa dipakai oleh mastah-mastah untuk melihat footprint backlink, keyword potensial pada suatu website/blog.  Siapa sih yang suka di intipin? risih kali ya kalau tiba-tiba muncul similiar site yang isinya mengambil apa yang terbaik dari website/blog kita doang khususnya pada artikel-artikel yang potensial mendatangkan trafik, tentunya ini bisa mengurangi kunjungan organik karena keyword kita ditiru oleh pesaing-pesaing apalagi kalau mereka memakai AGC mungkin peringkat anda bisa tersingkir dari halaman pertama google Blogger jaman sekarang pinter-pinter, yang dulunya sekedar asal ngeblog kini hanya fokus membuat konten yang bisa mendulang keuntungan. Kebanyakan tutorial diforum-forum telah membahas penggunaan layanan SEO seperti ahrefs, semrush, moz dan majestic untuk mengintip backlink kompetitor, mengetahui daftar kata kunci bertrafic den...