Cara Menganti Logo Header Blogger Menggunakan SVG


Logo adalah salah satu bagian yang terpenting untuk sebuah branding blog. Logo sendiri juga memiliki masing - masing ciri khas nya, semakin unik logonya maka semakin mudah blog kamu di ingat oleh para pengunjung. Menganti logo di header bisa dibilang cukup mudah tapi sayang-nya blogger hanya merekomendasikan logo header dalam format JPG,PNG dan GIF alhasil logo header yang kamu pasang dalam format tersebut akan blur dan memberatkan performa blog kamu.

Nah! Untuk mengatasi logo di header blur kamu bisa menggunakan logo dengan format SVG, Apa kelebihan format foto SVG ini, sehingga banyak sekali orang-orang maupun web perusahaan menggunakan gambar yang berformat SVG. Menggunakan logo SVG di blog adalah langkah yang tepat kamu terapkan, sebab logo SVG ini lebih baik kerjanya untuk kecepatan loading blog ketimbang menggunakan logo dalam bentuk gambar.

Menganti Logo Header Blogger Menggunakan SVG

  1. Langkah pertama kamu harus mempunya logo dalam format svg, saya biasanya menggunakan Adobe Illustrator untuk membuat sebuah vector kamu bisa juga menggunakan software sejenisnya seperti Corel Draw, Inkscape dan lain sebagainya. Atau bisa juga jika logo blog kamu dalam format jpg di convert ke svg menggunakan Convertio.
  2. Langkah selanjutnya silahkan masuk ke blogger > tema > edit html kemudian cari kode seperti dibawah ini
  3. <!--[ 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'/>
  4. Kemudian ubah menjadi tag comment cara-nya hanya menambahkan tag awalan<!-- dan diakhiri dengan --> agar kode tersebut berubah menjadi tag comment yang diartikan hanya sebagai komentar dan tidak memiliki nilai pada template, sehingga menjadi seperti dibawah ini
  5. <!--[ 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'/>-->
  6. Langkah berikutnya upload file svg kamu ke cloudinary jika belum mempunyai akun daftar terlebih dahulu kemudian upload file svg kamu
  7. Langkah terakhir kembali ke edit html blogger dan salin kode ini kemudian paste tepat dibawah tag comment yang sudah kamu ubah pada point ke-3
  8. <div class='logo'>
    	<a href='https://www.aingribet.com/' title='aingribet'><img alt='aingribet' height='80' src='https://res.cloudinary.com/aingribet-com/image/upload/v1626880168/LogoAing_swwsoi.svg' title='aingribet' width='380'/></a>
    	<div class='clear'/>
    </div>

    bagian yang saya tandai silakan ubah sesuai nama blog dan link svg kamu dan lihat hasilnya

Demikian tutorial Cara Menganti Logo Header Blogger Menggunakan SVG. Semoga bermanfaat.
Baca juga :