Cara Mengubah Logo Header Format SVG di Template Blogger Viomagz

Saya pernah baca di blog, tapi lupa nama blognya apa katanya kalau logo header untuk website itu bagusnya pakai yang format SVG. Dan kalau saya pikir-pikir ada benarnya juga, ada beberapa keunggulan dari SVG ketimbang format gambar yang lain seperti: PNG, JPG, atau JPEG.

Beberapa keunggulan dari SVG yang sejauh ini saya ketahui:

- SVG itu lebih scalable dan responsive, memang benar sihh karena SVG terbuat dari beberapa jalur atau biasanya disebut dengan Path dan juga SVG itu didasarkan dari XML yang mana lebih cocok untuk menaruh gambar di website.

- Dari jalur tersebutlah, SVG memiliki format yang tak terbatas sehingga kalau kita mau zoom-kan sampai berapa persen pun, kualitasnya tidak akan pecah atau berkurang.

- Berbeda dari format raster seperti PNG, JPG, atau JPEG karena dimensi mereka tetap jadi kalau kita terus zoom-kan, maka kualitas akan berkurang (pixelate) dan akan kelihatan seperti pecah-pecah kualitas gambarnya.

Baiklah, karena saya ingin logo header di blog ini kelihatan tajam dan stabil, jadi saya memutuskan untuk mencoba menggantinya dengan gambar format SVG.

Tapi...

Saya sudah pernah coba menggantinya lewat menu Layout/Tata Letak, tapi tidak berhasil karena mungkin Blogger belum support untuk upload gambar SVG di header logonya.

Jadi, mau tidak mau kita harus menggantinya lewat menu Edit HTML di Theme/Tema.

Syarat untuk mengganti logo headernya agar sesuai postingan ini adalah:

- Tentu saja, CMSnya Blogger

- Template yang saya gunakan adalah Viomagz V4.8 dari Mas Sugeng, untuk versi lain saya kurang tahu jadi silahkan dicoba-coba ya.

- Siapkan url yang ngelink ke file/gambar SVGnya, jadi harus diupload dulu bisa dari penyedia image hosting seperti: ImgBB, ImageKit, dan lain-lain. Di sini saya menggunakan ImageKit karena sudah support CDN.

- Opsional: Sebelum mengganti kodenya, lebih baik backup templatenya terlebih dahulu agar jika terjadi kesalahan kita bisa mengembalikannya lagi seperti sebelumnya.

Berikut ini langkah-langkah mengubah logo header menjadi format SVG di Blogger:

1. Masuk ke menu Edit HTML

Untuk masuk ke menu Edit HTML, bisa dari Theme kemudian klik tanda segitiga bawah sebelah tombol Customize, lalu pilih Edit HTML.

2. Cari Keyword <b:includable id='image'>

Setelah masuk di menu Edit HTML, kita tinggal cari dimana kode html untuk mengganti logo headernya. Untuk itu kita bisa cari dengan keyword <b:includable id='image'>, tapi perlu diingat posisi kode ini harus berada di atas kode <b:section class='navmenu' id='navmenu' maxwidgets='1' showaddelement='no'>.

Soalnya, kode ini ada dua untuk kode yang satu lagi saya belum tahu, apakah perlu diubah atau tidak. Tapi, saya sudah coba yang penting diganti kode yang pertama saja karena sudah jelas terletak di atas navigasi bar.

Untuk lebih jelasnya terlihat seperti ini:

<b:includable id='image'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:title'>
            <img expr:alt='data:title' expr:src='resizeImage(data:sourceUrl, 300)' expr:title='data:title' height='60' width='300'/>
            <!-- <img class='lazyload' expr:alt='data:title' expr:title='data:title' expr:data-src='resizeImage(data:sourceUrl, 250)' width='300' height='60' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAABCAYAAAD9yd/wAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAPSURBVAiZY+zt7c1kwAIALtACEvr8z1AAAAAASUVORK5CYII='/> -->
        </a>
    </b:includable>
         <b:includable id='title'>
        <div class='titlewrapper' style='background: transparent'>
            <b:class cond='data:this.imagePlacement in {&quot;REPLACE&quot;,&quot;BEFORE_DESCRIPTION&quot;}' name='hide-title'/>
            <b:if cond='data:view.isSingleItem'>
                <h2 class='title'>
                    <a expr:data-text='data:title' expr:href='data:blog.homepageUrl' expr:title='data:title'><data:title/></a>
                </h2>
            <b:else/>
                <h1 class='title'>
                    <a expr:data-text='data:title' expr:href='data:blog.homepageUrl' expr:title='data:title'><data:title/></a>
                </h1>
            </b:if>
        </div>
    </b:includable>
       </b:widget>
     </b:section>
	
    <b:section class='navmenu' id='navmenu' maxwidgets='1' showaddelement='no'>
      <b:widget id='HTML642' locked='true' title='Kode Menu Navigasi' type='HTML' version='2' visible='true'>
        <b:widget-settings>
          <b:widget-setting name='content'>&lt;li&gt;&lt;a href=&quot;https://www.rinaldipratama.com/p/about-me.html&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.rinaldipratama.com/p/daftar-isi.html&quot;&gt;Daftar Isi&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.rinaldipratama.com/search/label/Source%20Code?&amp;max-results=8&quot;&gt;Source Code&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.rinaldipratama.com/p/contact-me.html&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
          <nav id='cssmenu'>
            <div id='head-mobile'/>
            <div class='button' id='menu-button'>
              <span class='mline1'/>
              <span class='mline2'/>
              <span class='mline3'/>
            </div>
            <ul>
              <data:content/>
            </ul>
          </nav>
          </b:includable>
      </b:widget>
    </b:section>

Kemudian hapus kode expr:src='resizeImage(data:sourceUrl, 300)' di bagian tag <img> pertama dan ubah menjadi:

src='url_link_ke_gambar_logo.svg'

Sehingga full kodenya menjadi seperti ini:

<a expr:href='data:blog.homepageUrl' expr:title='data:title'>
    <img expr:alt='data:title' src='https://ik.imagekit.io/rinalmedia/img_logo/logo-rinaldipratama-blog_Ql8RiI7cj.svg' expr:title='data:title' height='60' width='300'/>
<!-- <img class='lazyload' expr:alt='data:title' expr:data-src='resizeImage(data:sourceUrl, 250)' expr:title='data:title' height='60' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAABCAYAAAD9yd/wAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAPSURBVAiZY+zt7c1kwAIALtACEvr8z1AAAAAASUVORK5CYII=' width='300'/> -->
</a>

Perlu diperhatikan:

Yang diganti hanya tag img pertama, karena yang di bagian bawahnya sudah dikomen sehingga kode tersebut akan diabaikan/tidak terpakai.

Jika sudah diganti, silahkan save template tersebut dengan mengklik tombol Save di bagian pojok kanan atas.

3. Lihat hasil logo header

Setelah di Save, kita bisa lihat perubahan logo header tersebut apakah berhasil atau tidak. Silahkan kunjungi link blog masing-masing.

Jika berhasil dan tak ada masalah, maka logo akan terganti dengan gambar format SVG yang sudah kita siapkah sebelumnya. Berikut ini kalau punya saya:

Bisa kita lihat kalau logo header tersebut akan terlihat jelas, tajam, dan tidak akan pecah-pecah.

Sekian tutorial kali ini, jika masih ada kendala silahkan komen di kolom komentar di bawah ini. Terima kasih telah membaca artikel ini. 😊

Rinaldi Pratama Putra Reality is a lovely place, but I wouldn't wanna live there.

Share :