Cara Modifikasi Header Theme Contempo Blogspot


Sejak 12 Maret 2018, BLOGOOBLOK bertranspormasi menggunakan theme terbaru dari Blogspot. Saya memilih menggunakan theme contempo karena tampilannya yang sederhana. Nyaris semua hal yang saya idamkan terpenuhi oleh theme baru ini.

Baca: Cerita Saya Mencoba Tampilan Contempo Blogspot

Sayangnya, pengaturan bawaan contempo menyisahkan sedikit pekerjaan rumah. Utamanya di bagian 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 adalah 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 akhirnya saya hilangkan.

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

Cara Menghilangkan Gambar Background Header

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


Bagi saya hal itu sedikit mengurangi estetika tampilan, karena terdapat tiga warna dominan 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 bagian 'Tema/Theme' lalu pilih 'Sesuaikan'. Masuk ke tab 'Lanjutkan' lalu geser kursor ke pengaturan paling akhir 'Tambahkan CSS'. Selanjutnya paste kode 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 bagian 'Latar' lalu pilih sesuai kehendak. BLOGOOBLOK memilih tetap menggunakan warga grey, karena menonjolkan kesan sederhana.

Cara Menghilangkan Sticky Header

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

Karena saya mengaktifkan pengaturan Auto Ad dari Google Adsense, sehingga iklan seringkali muncul di bagian sticky ini. Walau yang akhirnya muncul hanya secuil, namun bagian kepala yang mengganggu itu akan tetap memotong separuh bagian 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 bagian 'Tambahkan CSS'. Kode CSSnya seperti berikut. Sisa copy dan paste lalu tekan tombol 'Terapkan ke Blog'.

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

Cara Memasukkan dan Mengatur Ukuran Logo

Logo bagi sebuah blog sudah seperti identitas yang tak boleh disepelekan. Orang-orang akan mudah mengingat blog kita hanya dengan melihat logonya. Jadi sangat penting. Sayangnya, meski theme contempo mendukung untuk pemasangan logo, tapi tampilannya tidak langsung menyesuaikan badan blog.

Kita tetap harus mengaturnya dengan manual. Untuk memasang logo, terlebih dahulu menguploadnya di bilah 'Gadget'. Lalu ke bagian 'Header' dan lakukan configurasi. Upload logo yang hendak di pasang. Tidak lupa tetap mencentang bagian '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 enak dipandang. Langkah selanjutnya, kembali ke halaman 'Tambahkan CSS'. Lalu masukkan kode 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 bagian max-width: 380px;. Cari ukuran yang sesuai. Lalu pilih 'Terapkan ke Blog' jika sudah yakin. Kalau memilih memasukkan gambar seukuran body, kode di atas juga bisa 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 bisa melakukan eksperimen sendiri sesuai kehendak hati.

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

Theme baru dari blogspot memang memiliki banyak kemudahan dibanding theme lama. Nyaris semua pengaturan untuk modifikasi bisa dilakukan melalui channel CSS. Sehingga yang tidak memahami struktur HTML tidak perlu takut melakukan kesalahan.

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

Salam kreasi!


Comments

Artikel Populer Lainnya

Cara Memasang Iklan Google Adsense di Blogspot

Cara Mendaftar Google Adsense dari Blog Blogspot

Mengenal dan Cara Membuat Layanan Subscribe

Apa Itu Pinterest dan Bagaimana Membuatnya?

Cara Alami Meningkatkan Viewers Youtube

Cara Mudah Memasang Iklan Google Adsense di Youtube

Cara Membuat Signature Pada Gmail, Yahoo dan Outlook

Cara Membuat Layanan Contact Us di Blog

Cara Mudah Membuat Privacy Policy Buat Blog

Cara Mengubah Nama Akun/Channel Youtube