✔ Cara Modifikasi Header Theme Contempo Blogspot

Sejak 12 Maret 2018, BLOGOOBLOK bertranspormasi memakai theme terbaru dari Blogspot. Saya menentukan memakai theme contempo alasannya ialah tampilannya yang sederhana. Nyaris semua hal yang saya idamkan terpenuhi oleh theme gres ini.

Baca: Cerita Saya Mencoba Tampilan Contempo Blogspot

Sayangnya, pengaturan bawaan contempo menyisahkan sedikit pekerjaan rumah. Utamanya di bab header atau kepala. Ada latar yang tak mau hilang meski sudah dihapus. Logo yang dimasukkan pun meski kecil hasilnya akan tetap besar. Dan yang paling mengganggu ialah sticky header.

Mungkin sebagian orang tidak akan bermasalah dengan sticky header itu. Tapi kemunculannya di versi mobile sesekali memakan separuh layar gadget dan menutup sebagian artikel. Saya sangat memperhatikan kenyamanan pengunjung, sehingga itu cukup annoying. Hingga akibatnya saya hilangkan.

Ada tiga hal dasar yang saya lakukan untuk memodifikasi bab header theme contempo. Semuanya melalui proses yang sederhana. Hanya dengan menambahkan isyarat CSS. Berikut penjelasannya satu-persatu.

Cara Menghilangkan Gambar Background Header

Bawaan theme contempo akan menampilkan gambar background berupa pemandangan. Pun jikalau dihilangkan melalui pengaturan, warna bab background tetap tidak akan sama dengan latar belakang blog secara keseluruhan. Sehingga nampak ganjil.

Bagi saya hal itu sedikit mengurangi estetika tampilan, alasannya ialah terdapat tiga warna mayoritas dalam blog. Meski tidak ada hukum bakunya, namun saya selalu mengusahakan, minimal hanya dua warna dominan. Sehingga saya putuskan untuk menghilangkannya.

Caranya cukup sederhana. Silahkan masuk ke bab 'Tema/Theme' kemudian pilih 'Sesuaikan'. Masuk ke tab 'Lanjutkan' kemudian geser kursor ke pengaturan paling simpulan 'Tambahkan CSS'. Selanjutnya paste isyarat di bawah ini di kotak yang disediakan. Setelahnya tinggal tekan 'Tepatkan ke Blog'.

.bg-photo-overlay { display:none; }

Tampilan background blog Anda akan sepenuhnya satu warna. Jika menginginkan mengganti warna dasarnya, pergi ke bab 'Latar' kemudian pilih sesuai kehendak. BLOGOOBLOK menentukan tetap memakai warga grey, alasannya ialah menonjolkan kesan sederhana.

Cara Menghilangkan Sticky Header

Sticky header ialah bab kepala yang selalu melekat di layar paling atas pada blog. Meski halaman digeser ke bab bawah. Sebenarnya ada banyak fungsi dari sticky header ini. Selain untuk memudahkan pengunjung kembali ke halaman home, juga sanggup menampilkan tombol pencarian.

Karena saya mengaktifkan pengaturan Auto Ad dari Google Adsense, sehingga iklan seringkali muncul di bab sticky ini. Walau yang akibatnya muncul hanya secuil, namun bab kepala yang mengganggu itu akan tetap memotong separuh bab blog.

Karena berdasarkan saya ini mengurangi kenyamanan pembaca, saya putuskanlah untuk dihilangkan. Buat kalian yang tidak merasa begitu, sebaiknya dipertahankan saja. Kalau hitung-hitungannya iklan dan penghasilan, memang akan sangat menguntungkan. Namun pengunjung akan berpikir dua kali untuk kembali dengan banyak gangguan itu.

Untuk menghilangkan sticky header tersebut, caranya nyaris sama dengan menghilangkan background header. Tetap di bab 'Tambahkan CSS'. Kode CSSnya ibarat berikut. Sisa copy dan paste kemudian tekan tombol 'Terapkan ke Blog'.

.centered-top-container.sticky {
    display: none !important;
}

Cara Memasukkan dan Mengatur Ukuran Logo

Logo bagi sebuah blog sudah ibarat identitas yang tak boleh disepelekan. Orang-orang akan gampang mengingat blog kita hanya dengan melihat logonya. Makara sangat penting. Sayangnya, meski theme contempo mendukung untuk pemasangan logo, tapi tampilannya tidak eksklusif menyesuaikan tubuh blog.

Kita tetap harus mengaturnya dengan manual. Untuk memasang logo, terlebih dahulu menguploadnya di bilah 'Gadget'. Lalu ke bab 'Header' dan lakukan configurasi. Upload logo yang hendak di pasang. Tidak lupa tetap mencentang bab 'Tampilan Header Halaman' dan pilih 'Tempatkan Keterangan Setelah Gambar'. Setelah itu simpan.

Maka logonya akan muncul di kepala blog kita. Biasanya ukurannya akan besar dan tidak yummy dipandang. Langkah selanjutnya, kembali ke halaman 'Tambahkan CSS'. Lalu masukkan isyarat berikut.

.centered-top-container img, .centered-top-placeholder img {
  max-width: 380px;
  margin: 0 auto;
  display: block;
}

Untuk mengubah ukuran sesuai yang dikehendaki, silahkan mengubah angka pada bab max-width: 380px;. Cari ukuran yang sesuai. Lalu pilih 'Terapkan ke Blog' jikalau sudah yakin. Kalau menentukan memasukkan gambar seukuran body, isyarat di atas juga sanggup dipakai untuk mengatur komposisinya.

Hasil pengaturan header theme contempo ini akan menciptakan tampilan blog kian sederhana. Karena saya memang berharapnya demikian, maka saya mengaturnya begitu. Kalian sanggup melaksanakan eksperimen sendiri sesuai kehendak hati.

Baca Juga: Blogspot Ganti Template Makara Tema dan 4 Desain Baru

Theme gres dari blogspot memang mempunyai banyak akomodasi dibanding theme lama. Nyaris semua pengaturan untuk modifikasi sanggup dilakukan melalui channel CSS. Sehingga yang tidak memahami struktur HTML tidak perlu takut melaksanakan kesalahan.

Semoga bermanfaat dan jikalau ada pertanyaan lain, silahkan menulisnya dalam kolom komentar. Saya akan berusaha sebisa mungkin membantu menjelaskan. Khususnya untuk theme contempo. Pengaturan untuk theme lain sanggup jadi tidak akan sama dengan cara di atas.

Salam kreasi!



Sumber http://www.blogooblok.com

Share this post

Berlangganan update artikel terbaru via email: