Caranya Modifikasi Header Theme Contempo Blogspot

Sejak 12 Maret 2018, BLOGOOBLOK bertranspormasi menggunakan theme terbaru dari Blogspot. Saya menentukan menggunakan theme contempo alasannya tampilannya yg sederhana. Nyaris semua hal yg 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 yg tak mau hilang meski sudah dihapus. Logo yg dimasukkan pun meski kecil hasilnya bakal tetap besar. Dan yg paling mengganggu yakni sticky header.

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

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

Caranya Menghilangkan Gambar Background Header

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

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

Caranyanya cukup sederhana. Silahkan masuk ke bab 'Tema/Theme' kemudian pilih 'Sesuaikan'. Masuk ke tab 'Lanjutkan' kemudian geser kursor ke pengaturan paling tamat 'Tambahkan CSS'. Selanjutnya paste aba-aba di bawah ini di kotak yg disediakan. Setelahnya tinggal tekan 'Tepatkan ke Blog'.

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

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

Caranya Menghilangkan Sticky Header

Sticky header yakni bab kepala yg 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 yg hasilnya muncul hanya secuil, namun bab kepala yg mengganggu itu bakal tetap memotong separuh bab blog.

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

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

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

Caranya Memasukkan dan Mengatur Ukuran Logo

Logo bagi sebuah blog sudah mirip identitas yg tak boleh disepelekan. Orang-orang bakal Mudah 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 Musti mengaturnya dengan manual. Untuk memasang logo, terlebih dahulu menguploadnya di bilah 'Gadget'. Lalu ke bab 'Header' dan lakukan configurasi. Upload logo yg hendak di Memasang. Tidak lupa tetap mencentang bab 'Tampilan Header Halaman' dan pilih 'Tempatkan Keterangan setelah Gambar'. setelah itu simpan.

Maka logonya bakal muncul di kepala blog kita. Biasanya ukurannya bakal besar dan tidak lezat dipandang. Langkah selanjutnya, kembali ke halaman 'Tambahkan CSS'. Lalu masukkan aba-aba berikut.

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

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

Hasil pengaturan header theme contempo ini bakal membuat 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 fasilitas dibanding theme lama. Nyaris semua pengaturan untuk modifikasi sanggup dilakukan melalui channel CSS. Sehingga yg tidak memahami struktur HTML tidak perlu takut melaksanakan kesalahan.

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

Salam kreasi!

Tweet