Mengganti Header Blogger dengan Logo atau Gambar

Mengganti Header Blogger dengan Logo atau Gambar

Logo adalah salah satu elemen penting yang bisa memperkuat branding blog. Logo menjadi ciri khas dan biasanya digunakan juga untuk keperluan periklanan. Kenapa? Karena gambar dari logo dapat dipasang di berbagai tempat di media elektronik maupun cetak ketika melakukan promosi. Semakin unik logonya, semakin mudah diingat blognya.

Mengubah gambar di header Blogger adalah hal yang sangat dasar, tapi ternyata masih banyak yang belum paham bagaimana caranya. Maka dari itu blog Igniel akan menuliskan tutorialnya untuk kalian semua.


Cara Memasang Logo Gambar di Header Blogspot

Panduan ini berlaku sama untuk semua template. Usahakan logonya memiliki format PNG ya agar backgroundnya transparan dan bisa menyatu dengan header.

  1. Buka dashboard Blogger dan pergi ke menu Layout (Tata Letak).
  2. Cari sebuah widget yang bernama Header lalu klik edit.
    Cara Ganti Gambar Logo Header Blogspot
  3. Di sana ada dua pilihan dalam mengupload gambar, yaitu:
    a) From your computer (Dari komputer Anda)
    Diambil langsung dari gambar yang tersimpan di komputer.
    b) From the web (Dari web)
    Dari situs hosting lain, tinggal mengambil URL gambarnya saja.

  4. Kali ini saya contohkan mengambil dari komputer langsung. Kik tombol Choose File dan pilih gambarnya.
    Cara Ubah Teks Menjadi Gambar di Header Blogger

  5. Lalu ada 3 pilihan posisi penempatan gambar.
    a) Behind title and description (Di balik judul dan keterangan)
    Akan tumpang tindih dengan judul dan deskripsi blog. Posisi gambar akan berada di belakangnya (sebagai background)
    b) Instead of title and description (Selain judul dan keterangan)
    Ini posisi yang saya Rekomendasikan. Judul dan deskripsi akan hilang dan tergantikan oleh gambar.
    c) Have description placed after the image (Tempatkan keterangan setelah gambar)
    Gambar ada di atas dan deskripsi berada di bawahnya.

  6. Pada contoh, saya pilih Instead of title and description (Selain judul dan keterangan).

  7. Setelah selesai, klik tombol Save (Simpan).
    Cara Pasang Gambar Logo di Header Blogspot

Resolusi Gambar

Berapa sih resolusi gambar yang pas biar nggak terlalu besar atau kecil?

Batas minimal dan maksimal resolusi logo berbeda-beda, tergantung si pembuat template. Namun hampir kebanyakan template sekarang ini mempunyai fitur auto fit, yaitu logo akan otomatis mengikuti ukuran panjang dan lebar (height dan width) dari header. Ini dimaksudkan agar keberadaan logo tidak menhancurkan desain header.

Misalnya tinggi header template Igniplex adalah 50px. Kamu memiliki sebuah logo dengan resolusi 700px x 115px. Nantinya logo tersebut akan otomatis mengecil menjadi 300px x 50px. Ingat ya, yang menjadi patokan adalah PANJANG (height) dari header template, dalam contoh ini nilainya adalah 50px. Maka nilai LEBAR (width) otomatis mengikuti height, yang mana dalam contoh menjadi 300px saat mengecil.

Tips dari saya, buatlah logo yang memiliki orientasi landscape alias memanjang ke samping. Hindari logo beroriantasi rectangle (resolusi panjang dan lebar sama besar) atau portrait (memanjang ke bawah) karena akan membuat logo terlihat sangat kecil.

Cara Upload Gambar Sendiri ke Logo Header Blogger

Coba buat logo dengan nilai height minimal 150px agar tetap jernih saat otomatis dibesarkan atau dikecilkan.


Ukuran Gambar

Ukuran di sini adalah besaran file dalam Kilobyte (KB). Usahakan membuat gambar yang tidak terlalu besar agar tidak memberatkan loading blog. Ukuran maksimal yang disaranan adalah 50KB. Kurang dari itu lebih baik. Coba deh kompres ukuran KB gambar menjadi lebih kecil agar blog tetap ringan.

Selesai sudah panduan mengganti judul blog menjadi logo atau gambar di Blogger. Semoga penjelasannya bisa dipahami dengan mudah.

Artikel Terkait

28 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • INFORMATION
    17/5/22
    Profil: https://www.blogger.com/profile/04579198829668845699
    Hi which template used to You in this Blog plz reply me
    • Igniel
      17/5/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Made it by myself. It's only one.
  • Ibnu Sofyan
    13/4/22
    Profil: https://www.blogger.com/profile/09409986309322595170
    Fotonya gak transparan kenapa ya? padahal udah .PNG
    • Igniel
      17/5/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba sertakan gambarnya.
  • Trial MembƎr
    2/1/22
    Profil: https://www.blogger.com/profile/15515183494785880008
    Thanks kak,, u the best.. saya pilih opsi dri kaka, 700 x 115

    Dah hasilnya,, no mengecil2 klub
  • masjuardi
    18/12/21
    Profil: https://www.blogger.com/profile/05164963287558337987
    makasih om atas bantuannya
  • ViaL
    7/12/21
    Profil: https://www.blogger.com/profile/07175073471388767635
    Kak punya saya header logo gambarnya cuma tampil pada mode dekstop aja, sedangkan untuk tampilan mobile enggak muncul. Cara mengatasinya gimana kak? Tolong di balas
    • Igniel
      17/5/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Mungkin kodenya masuk ke dalam tag kondisional. Coba tanya ke pembuat templatenya aja karena kode tiap template berbeda.
  • Madrasah Santri
    28/9/21
    Profil: https://www.blogger.com/profile/01373336474856832583
    Nah mas blog saya persis hijau macam punya mas, waktu kita buat gambar putih atau hijau ya, soal nya saya lihat di atas gambar nya warna hijau, dan kalo latar menu nya warna hijau juga apa akan nampak ?
    • Igniel
      28/9/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Gambarnya bikin warna putih aja mas.
  • m boby hasan arfani
    15/8/21
    Profil: https://www.blogger.com/profile/13686820638464117904
    Kalo poto headernya gak muncul itu karena apa ya mbak kira kira? Soalnya saya pas ganti malah gak muncul potonya. Cuma kayak gambar poto kecil gagal loading gitu.
    • Igniel
      17/5/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa jadi karena logonya pake lazy load, atau URL gambarnya salah.
  • Winarno
    21/5/21
    Profil: https://www.blogger.com/profile/02226575747796343022
    Blog saya sudah tidak bisa seting tema html lagi mbak, kira kira keteranganya begini.

    The widget settings in widget with id AdSense1 is not valid. An internal error occurred

    Saya juga lupa awalnya ngapain kok bisa bgitu.
    widget adsense mau saya hapus tetapi di menu tata letaknya tidak ada opsi untuk menghapus. Tolong bantu dong mbak, siapa tahu pernah ngalamin. Soalnya saya sama sekali gak tahu coding codingan. Ini blog saya, siapa tahu mau nengokin.
    https://bisatanpamodal.blogspot.com
  • Kanx Ifoel
    4/3/21
    Profil: https://www.blogger.com/profile/18024606962931193839
    Itu kalo logo di headernya loadingnya tampannya lambat gimana cara mengatasinya ya mbak? 🙏
    • Igniel
      10/3/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kemungkinan:
      1) Ukuran KB-nya terlalu besar.
      2) Atau pakai lazyload gambar sehingga logo terlambat dimuat.
  • Maulana
    27/12/20
    Profil: https://www.blogger.com/profile/12969664024017018277
    Mba Igniel, saya mau bertanya. Klo buat logo seperti punya Mba igniel melalui platform website atau aplikasi apa?
    • Igniel
      10/3/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Photoshop mas.
      Kalau mau gampang dan gratis bisa coba ke website Canva.
  • Agam
    8/12/20
    Profil: https://www.blogger.com/profile/18316422596041174859
    Makasih kak infonya. Btw gimana caranya bikin gambar header biar gak pecah ya? Gw udh bikin ukuran 300x50px. Pas lagi bikin gambarnya jelas, tapi pas di upload di blog kok pecah ya? Help..
  • Anonim
    Anonim 6/4/20
    Mba kalo buat menu mobilenya yang diatas dipindah dibawah gimana ya?
  • Lambardet giovinco
    27/2/20
    Profil: https://www.blogger.com/profile/10686795778614216446
    Eror ga kalo lebih kecil
    • Igniel
      11/4/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ngga. Cuma aneh aja kalo logonya kecil.
    • Brok3n link
      7/11/20
      Profil: https://www.blogger.com/profile/04886843121012440281
      Haha kolo logonya kecil mah, ga jelas atuh🤣🤣
  • Wiki Writer
    4/2/20
    Profil: https://www.blogger.com/profile/02637480006193314563
    Makasi mbak tutorialnya. Mantap!!
  • Netponsel.com
    30/1/20
    Profil: https://www.blogger.com/profile/18205374039733936178
    Kerennn
  • Munandarif
    16/1/20
    Profil: https://www.blogger.com/profile/01194354977595713409
    Kalo favicon biar ga pecah gimana min? Padahal yang diupload di Tata Letak ukurannya 500x500 tapi tetap pecah, pake yang 7x7 atau ukuran kecil lainnya pun juga pecah.

    Pecahnya bukan di PC, tapi kalo lagi di HP atau juga waktu di halaman awal waktu buka browser mozilla / chrome
    • Admin
      23/1/20
      Profil: https://www.blogger.com/profile/08057282632790214870
      Uk 50x50 coba
    • Narasi Nia
      20/6/21
      Profil: https://www.blogger.com/profile/14971582159258141090
      ukuran favicon itu 16x16, kak :)
  • Munir
    15/1/20
    Profil: https://www.blogger.com/profile/15000904957935300437
    Kak kamu membuat gambar artikelnya pakai aplikasi apa sih? di tunggu jawabannya kak!