Mengatur Ukuran Logo Header Tema Notable Blogger

Beberapa waktu lalu saya sudah membagikan tutorial tentang cara mengganti judul blog dengan logo gambar pada tema bawaan Blogger versi lama. Untuk desain logo dan cara mengunggahnya, sebenarnya tidak jauh berbeda dengan tema Notable.

Namun, terdapat sedikit perbedaan pada penggunaan CSS untuk mengatur ukuran logo.

Pada tema Blogger versi lama, ukuran tinggi gambar logo mengikuti ukuran lebarnya. Sedangkan pada tema Notable, justru sebaliknya, yaitu ukuran lebar gambar logo mengikuti ukuran tinggi gambar.

Oleh karena itu, jika ukuran logo pada header tema Notable terlihat terlalu besar atau terlalu kecil, kita dapat mengaturnya secara manual menggunakan CSS.

Cara Mengatur Ukuran Logo Header Tema Notable

Untuk mengubah ukuran logo pada header tema Notable, ikuti langkah-langkah berikut.

1. Buka Editor HTML Tema Blogger

Pertama, login ke dashboard Blogger.

Kemudian pilih:

Tema → Edit HTML

Setelah editor HTML terbuka, kita akan menambahkan kode CSS untuk mengatur tinggi logo.

2. Cari Kode CSS Logo Header

Selanjutnya, cari kode CSS berikut di dalam editor HTML:

.widget.Header img{
  max-width:100%
}

Kode tersebut berfungsi mengatur ukuran gambar logo agar menyesuaikan area header.

Agar tinggi logo dapat diatur sesuai kebutuhan, tambahkan properti height.

Misalnya, kita ingin membuat tinggi logo menjadi 40px.

Ubahlah kode tersebut menjadi:

.widget.Header img{
  max-width:100%;
  height:40px
}

Dengan pengaturan tersebut, tinggi logo akan ditetapkan sebesar 40px dan untuk lebar akan mengikuti tinggi secara otomatis.

3. Sesuaikan Ukuran Logo

Nilai 40px pada kode di atas dapat disesuaikan dengan kebutuhan.

Misalnya:

height:30px

untuk logo yang lebih kecil, atau:

height:50px

untuk logo yang lebih besar.

Anda dapat mencoba beberapa ukuran sampai mendapatkan tampilan logo yang paling sesuai dengan header blog.

Tips: Jangan menggunakan ukuran yang terlalu besar karena dapat membuat header terlihat terlalu tinggi dan mengganggu tampilan blog, terutama pada perangkat mobile.

4. Simpan Perubahan

Setelah selesai menambahkan kode CSS, klik Simpan.

Kemudian buka blog dan periksa tampilan logo pada bagian header.

Jika ukurannya belum sesuai, Anda dapat kembali ke Tema → Edit HTML, kemudian mengubah nilai height sesuai kebutuhan.

Kesimpulan

Mengatur ukuran logo pada tema Notable Blogger cukup mudah. Perbedaannya dengan beberapa tema Blogger versi lama adalah cara tema tersebut menentukan ukuran logo.

Pada tema Notable, kita dapat menentukan tinggi logo secara manual menggunakan properti CSS.

Semoga tutorial cara mengatur ukuran logo header tema Notable Blogger ini bermanfaat.