Cara Modifikasi Header Theme Contempo Blogspot

Baca Juga

Sejak 12 Maret 2018, BLOGOOBLOK bertranspormasi menggunakan theme terbaru dari Blogspot. Saya memilih menggunakan theme contempo alasannya yakni 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 kepingan header atau kepala. Ada latar yang tak mau hilang meski sudah dihapus. Logo yang dimasukkan pun meski kecil akibatnya akan tetap besar. Dan yang paling mengganggu yakni 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 karenanya saya hilangkan.

Ada tiga hal dasar yang saya lakukan untuk memodifikasi kepingan header theme contempo. Semuanya melalui proses yang sederhana. Hanya dengan menambahkan instruksi 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 kepingan background tetap tidak akan sama dengan latar belakang blog secara keseluruhan. Sehingga nampak ganjil.

Bagi saya hal itu sedikit mengurangi estetika tampilan, alasannya yakni terdapat tiga warna secara umum dikuasai dalam blog. Meski tidak ada aturan bakunya, namun saya selalu mengusahakan, minimal hanya dua warna dominan. Sehingga saya putuskan untuk menghilangkannya.

Caranya cukup sederhana. Silahkan masuk ke kepingan 'Tema/Theme' kemudian pilih 'Sesuaikan'. Masuk ke tab 'Lanjutkan' kemudian geser kursor ke pengaturan paling tamat 'Tambahkan CSS'. Selanjutnya paste instruksi 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 kepingan 'Latar' kemudian pilih sesuai kehendak. BLOGOOBLOK memilih tetap menggunakan warga grey, alasannya yakni menonjolkan kesan sederhana.

Cara Menghilangkan Sticky Header

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

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

Karena menurut 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 kepingan 'Tambahkan CSS'. Kode CSSnya menyerupai 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 menyerupai identitas yang tak boleh disepelekan. Orang-orang akan praktis mengingat blog kita hanya dengan melihat logonya. Jadi sangat penting. Sayangnya, meski theme contempo mendukung untuk pemasangan logo, tapi tampilannya tidak eksklusif menyesuaikan badan blog.

Kita tetap harus mengaturnya dengan manual. Untuk memasang logo, terlebih dahulu menguploadnya di bilah 'Gadget'. Lalu ke kepingan 'Header' dan lakukan configurasi. Upload logo yang hendak di pasang. Tidak lupa tetap mencentang kepingan '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 instruksi 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 kepingan max-width: 380px;. Cari ukuran yang sesuai. Lalu pilih 'Terapkan ke Blog' jikalau sudah yakin. Kalau memilih memasukkan gambar seukuran body, instruksi di atas juga mampu digunakan untuk mengatur komposisinya.

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

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

Theme gres dari blogspot memang memiliki banyak akomodasi dibanding theme lama. Nyaris semua pengaturan untuk modifikasi mampu dilakukan melalui channel CSS. Sehingga yang tidak memahami struktur HTML tidak perlu takut melakukan 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 mampu jadi tidak akan sama dengan cara di atas.

Salam kreasi!