Mengganti Header Blogger dengan Logo atau Gambar

Panduan untuk mengubah teks di header Blogger menjadi logo atau gambar sendiri. Disertai tips menentukan ukuran KB, resolusi, dan format gambar yang tepat.
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, maka blog akan semakin mudah diingat.

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:
    • From your computer (Dari komputer Anda)
      Diambil langsung dari gambar yang tersimpan di komputer.
    • 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.
    • 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)
    • Instead of title and description (Selain judul dan keterangan)
      Ini posisi yang saya Rekomendasikan. Judul dan deskripsi akan hilang dan tergantikan oleh gambar.
    • 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 menghancurkan 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. Untuk memperkuat branding, gunakan nama domain sebagai gambar header Blogger seperti yang saya lakukan di blog Igniel.

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.

34
Mengganti Header Blogger dengan Logo atau Gambar
Mengganti Header Blogger dengan Logo atau Gambar
Panduan untuk mengubah teks di header Blogger menjadi logo atau gambar sendiri. Disertai tips menentukan ukuran KB, resolusi, dan format gambar yang tepat.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

34 komentar

  • 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> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Mbah Joni
    23 Maret, 2024
    Profil: https://www.blogger.com/profile/09588616371250104635
    Ikut nimbrung bos
  • WADI GRAFIKA
    02 Juni, 2023
    Profil: https://www.blogger.com/profile/07691951151969396409
    cara ngedit HTML kok beda ya, dulu rasanya mudah sekarang kok agak sulit, gak bisa control F
    • Igniel
      07 Juni, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Klik dulu sekali di bagian editor Blogger agar posisi mouse ada di dalam editornya, baru klik CTRL + F.
  • BBC
    01 November, 2022
    Profil: https://www.blogger.com/profile/11829867701466236522
    Mbak, setelah tulisan di header aku ganti dg gambar apakah tulisan aslinya memang jd hilang ya? Soalnya aq coba ketika kursor halaman turun, tulisan yg diatas header hilang. Maaf, pemula. Thanks atas solusinya. Kayak gini penampakannya https://ekorantoso.blogspot.com
  • Rental Sewa Mobil Belitung Murah Tanjung Pandan
    30 Oktober, 2022
    Profil: https://www.blogger.com/profile/18175473680542319777
    Trimakasih Bang
  • ☆★☆★☆★1ST☆★☆★☆★
    11 Oktober, 2022
    Profil: https://www.blogger.com/profile/10022774133393243691
    Trimsh infonya ,
    Silahkan mampir di blog aku ya

    https://artikelsaku.blogspot.com/?m=1
  • INFORMATION
    17 Mei, 2022
    Profil: https://www.blogger.com/profile/04579198829668845699
    Hi which template used to You in this Blog plz reply me
    • Igniel
      17 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Made it by myself. It's only one.
  • Ibnu Sofyan
    13 April, 2022
    Profil: https://www.blogger.com/profile/09409986309322595170
    Fotonya gak transparan kenapa ya? padahal udah .PNG
    • Igniel
      17 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba sertakan gambarnya.
  • Rabbit Run
    02 Januari, 2022
    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 Desember, 2021
    Profil: https://www.blogger.com/profile/05164963287558337987
    makasih om atas bantuannya
  • Mas Iwan
    07 Desember, 2021
    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 Mei, 2022
      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 September, 2021
    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 ?
  • m boby hasan arfani
    15 Agustus, 2021
    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 Mei, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa jadi karena logonya pake lazy load, atau URL gambarnya salah.
  • Winarno
    21 Mei, 2021
    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
  • Syaipullah.HS
    04 Maret, 2021
    Profil: https://www.blogger.com/profile/18024606962931193839
    Itu kalo logo di headernya loadingnya tampannya lambat gimana cara mengatasinya ya mbak? 🙏
    • Igniel
      10 Maret, 2021
      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 Desember, 2020
    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 Maret, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Photoshop mas.
      Kalau mau gampang dan gratis bisa coba ke website Canva.
  • Agam
    08 Desember, 2020
    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
    Anonim06 April, 2020
    Mba kalo buat menu mobilenya yang diatas dipindah dibawah gimana ya?
  • Lambardet giovinco
    27 Februari, 2020
    Profil: https://www.blogger.com/profile/10686795778614216446
    Eror ga kalo lebih kecil
    • Igniel
      11 April, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ngga. Cuma aneh aja kalo logonya kecil.
    • Brok3n link
      07 November, 2020
      Profil: https://www.blogger.com/profile/04886843121012440281
      Haha kolo logonya kecil mah, ga jelas atuh🤣🤣
  • Wiki Writer
    04 Februari, 2020
    Profil: https://www.blogger.com/profile/02637480006193314563
    Makasi mbak tutorialnya. Mantap!!
  • Admin
    30 Januari, 2020
    Profil: https://www.blogger.com/profile/18205374039733936178
    Kerennn
  • Munandarif
    16 Januari, 2020
    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
  • Munir
    15 Januari, 2020
    Profil: https://www.blogger.com/profile/15000904957935300437
    Kak kamu membuat gambar artikelnya pakai aplikasi apa sih? di tunggu jawabannya kak!