Cara Mengganti Logo Header Blogger Menggunakan SVG

Cara mengubah gambar judul header blogger menggunakan gambar svg terbaru terbukti ampuh mengatasi gambar logo header yang buram.
Mengganti logo header menggunakan image svg

Mengganti judul header dengan format svg - melalui widget header yang ada pada template biasanya tidak akan bisa diupload, dikarenakan hanya format JPG, PNG dan GIF yang valid saat diupload pada blog.

Umumnya orang menggunakan format PNG untuk title gambar pada header blog agar terlihat jelas, tapi tetap saja masih terlihat buram dan ukurannya juga mengecil.

Sebaiknya ketahui dulu apa itu svg dan kelebihannya, berikut penjelasan singkat terkait format svg.

Tentang Gambar Format SVG

Dikutip dari wikipedia.com, Scalable Vector Graphics (SVG) adalah format gambar yang menggunakan XML (Extensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi. SVG adalah format gambar yang dikembangkan oleh World Wide Web Consortium (W3C) sejak tahun 1999.

Lewat tulisan SVG " Scalabe Vektor Graphic " kita sudah bisa menilai bahwa foto atau gambar SVG ini adalah jenis vektor. Gambar vektor ini pun dikenal dengan kelebihannya yang hebat dari pada jenis foto biasa.

Saat ini semua peramban web populer seperti Mozilla Firefox, Internet Explorer, Google Chrome, Opera, dan Safari sudah mendukung penggunakan format SVG.

Kelebihan Gambar Format SVG

Gambar yang berjenis vektor atau dalam format SVG tidak akan pecah saat kita perbesar tampilannya. Inilah yang menjadi daya tarik saat ini untuk format SVG karena menjaga kualitas resolusi gambar.

Maka dari itu segera menggunakan gambar format SVG agar terlihat HD seperti yang digunakan pada blog ini, kelebihan lain menggunakan svg dibanding format gambar lain yaitu size lebih kecil dibanding format PNG namun tetap kualitasnya bagus/hd. Lalu bagaimana memasangnya? Scroll kebawah untuk panduannya berikut ini.


Cara Mengganti Logo Gambar Judul Header Blogger Dengan SVG

Cara ini terbilang rumit untuk menggunakan judul gambar svg diblog sebaiknya teliti mengikuti step by stepnya agar tidak ada kesalahan terutama masalah pada akun github yang menghostingkan gambar.

1. Membuat Foto Format SVG

Catatan:
jika sudah memiliki gambar header png yang sudah diconvert ke svg skip tahap ini, sebaliknya jika belum convert dahulu.

  1. Pertama kalian harus mempunyai gambar untuk judul header blog, biasanya format PNG.

    Lalu kunjungi situs convert PNG to SVG https://www.aconvert.com/image/png-to-svg/

  2. Upload gambar yang dimaksud lalu caranya  Pilih file > Image quality isi 100 > Convert Now contoh seperti screenshot berikut:

  3. convert png to svg
  4. Selanjutnya buka url preview file foto format svg tadi yang sudah terconvet, lalu tekan tahan pada gambar preview svgnya klik menu download. contoh previewnya seperti ini:

  5. gambar svg
  6. Jika sudah selesai mendownload hasil convert gambar ke svg tadi selanjutnya tahap pemasangan diblog baca lebih lanjut kebawah.

2. Memasang Gambar Format SVG di Blogger

Dikarenkan hosting penyimpanan internal di blogger.com tidak mendukung upload format foto SVG, maka kita akan menggunakan hosting penyimpanan foto eksternal di github.com tentunya gratis.

Menghostingkan File Gambar SVG

  1. Pertama daftar/login dahulu akun kalian di https://github.com/

  2. Jika sudah login selanjutnya bagi pengguna baru github harus membuat tempat file Repositoty terlebih dahulu tinggal beri nama bebas lalu > Create repository seperti ini:

  3. Responsitory github
  4. Selanjutnya upload files gambar svg Uploading an existing file > Choose your file > Commit changes seperti ini:

  5. Upload file di github
  6. Jika sudah, Pada tahap ini file gambar svg sudah berhasil diupload, langkah selanjutnya scroll kebawah.

Mengganti Gambar Judul Header Blogger ke SVG

Sebelum memulai, pastikan anda telah membackup template blog terlebih dahulu untuk berjaga-jaga jika terjadi sesuatu yang tidak di inginkan bisa direcovery.

  1. Buka akun blog di Blogger.com

  2. Lalu pilih menu Tema

  3. Klik ikon panah ke bawah di sebelah tombol 'Sesuaikan' 

  4. Tekan Edit HTML, otomatis diarahkan ke halaman kode XML.

  5. Edit HTML
  6. Selanjutnya tekan Titik tiga > Lompat ke widget > Header1 seperti berikut:

  7. Edit html
  8. Lalu jika sudah ke widget header scroll perlahan kebawah dan temukan kode persis seperti ini

  9. <!--[ Header image ]-->
    <a expr:href='data:blog.homepageUrl.canonical'><img expr:alt='data:title' expr:src='resizeImage(data:sourceUrl, 300)' expr:title='data:title'/></a>
    <b:include cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='title'/>
  10. Selanjutnya kalau ketemu matikan fungsi kode tersebut dengan menambahkan tags comment <!-- pada awalan dan akhir --> hasilnya akan seperti ini:

  11. <!--[ Header image ]-->
    <!--<a expr:href='data:blog.homepageUrl.canonical'><img expr:alt='data:title' expr:src='resizeImage(data:sourceUrl, 300)' expr:title='data:title'/></a> -->
    <!--<b:include cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='title'/>-->
  12. Lalu tambahkan kode HTML yang baru berikut ini tepat dibawah kode tadi.

  13. Catatan:
    ganti bagian URL kode HTML dibawah https://cdn.jsdelivr.net/gh/guntu7/logo/title.svg yang ditandai warna biru bold yaitu ussername, nama repository dan nama file gambar svg sesuai yang diupload pada akun github kalian sebelumnya.

    <img expr:alt='data:title' expr:height='data:height' expr:src='resizeImage(data:sourceUrl, 300)' expr:width='data:width' src='https://cdn.jsdelivr.net/gh/guntu7/icon/title.svg'/>
    <b:include cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='title'/>

    Contoh penempatan nya seperti berikut:

    html svg image header blogger
  14. Terakhir klik Save/Simpan perubahan selesai dan cek hasilnya.

Keterangan

Jika kalian bingung pada URL hosting gambar github https://cdn.jsdelivr.net/gh/guntu7/icon/title.svg sebaiknya upload saja diplatform lain agar memudahkan kalian mengambil URL gambar svgnya dan ganti url tersebut.


Itulah cara Cara Mengganti Logo Header Blogger Menggunakan SVG bagaimana mudah dimengerti bukan? Cukup sampai disini dulu, jika ada yang ingin ditanyakan bisa berkomentar dibawah atau menghubungi saya lewat halaman kontak dan email sekian terimakasih.

Rate this article

Getting Info...
Hey there! My name is Guntur aka Dev, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator. I love to Code and create interesting things while playing with it.

1 komentar

  1. Sip
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details