Pilih Bahasa
Indonesia
English
Japan (日本語)
China (简体中文)
Korean (한국어)
Hindi (हिंदी)
Vietnam (Tiếng Việt)
Arabic (العربية)
p7xhMSO4O9fyfib8OANOxXym2LUEvDesKq0YUJbG

Cara Mengubah Logo Header Blog Template Igniplex Menjadi Ikon SVG

Cara Ganti Logo Header Blog dengan Ikon SVG Template Igniplex
Mengubah Logo Header Blog Template Igniplex dengan Ikon SVG

Setiap blog bahkan website besar sekalipun biasanya memiliki letak khusus untuk menempatkan logo. Salah satu letak yang umum digunakan adalah di bagian header blog. Selain berguna sebagai link perujuk ke halaman beranda, penggunaan logo header blog ini juga sangat penting dalam mencerminkan ciri khas tampilan suatu blog. Dan kebanyakan template Blogger biasanya hanya menggunakan elemen gambar sebagai logo blog, termasuk template Igniplex yang sedang dipakai di blog ini.

Menurut saya pribadi, penggunaan elemen gambar sebagai default logo header blog kurang efektif. Selain dapat memberatkan loading blog, penggunaan elemen gambar sebagai logo blog juga sulit untuk dikustomisasikan dengan tampilan blog. Misalnya saja, setiap orang pasti akan membuat logo yang mengikuti warna tema dasar yang digunakan pada blog, sebut saja warnanya hijau.

Yang berarti tampilan logo blog tersebut akan memiliki warna dasar yang sama dengan warna tema blog, yaitu hijau. Dan jika suatu saat kamu mengubah warna tema dasar pada blog kamu, otomatis kamu juga harus mengubah kembali logo blog tersebut dengan warna dasar yang sesuai dengan warna tema blog. Terlalu ribet. Terlebih lagi jika kamu tipe orang yang mudah bosan dengan tampilan blog dan sering mengubah-ubah warna tema blog.

Akan lebih efektif dan praktis jika logo blog pada widget header menggunakan elemen atau ikon SVG. Kita dapat menyesuaikan warna tampilan pada logo SVG dengan lebih mudah melalui CSS. Jadi jika suatu saat kamu mengganti warna tema dasar blog, kamu tidak perlu repot-repot membuat logo blog baru lagi karena otomatis warna logo blog akan mengikuti warna tema yang digunakan di blog.

Selain itu, kualitas logo menggunakan elemen SVG juga lebih bagus dibandingkan dengan logo yang menggunakan elemen gambar biasa. Karena ikon SVG berupa vector, sehingga kualitas gambar tidak akan pecah atau rusak meskipun ukurannya diperbesar sebesar mungkin. Berbeda halnya dengan elemen gambar, kualitas gambarnya pasti akan pecah dan jelek jika ukurannya diperbesar.

Di artikel kali ini saya akan membahas cara mengganti logo header blog di template Igniplex versi 3 dengan ikon SVG sekaligus cara untuk konversi gambar PNG ke SVG dengan mudah. Berikut cara ganti gambar header blog menjadi ikon SVG di template Igniplex versi 3 dan cara mengubah gambar PNG ke SVG. Untuk pengguna template selain Igniplex juga bisa terapkan cara di bawah ini, namun untuk kode HTML widget header blognya tinggal disesuaikan saja dengan kode widget header yang digunakan karena setiap template menggunakan kode HTML yang berbeda.

Cara Mengubah Gambar PNG/JPG Menjadi SVG

Sebelum mengganti logo header blog dari gambar ke ikon SVG, tentunya kamu harus sudah menyiapkan terlebih dahulu ikon SVG berupa HTML. Karena metode yang digunakan untuk mengubah logo header blog di template Igniplex ini adalah dengan mengganti section widget header Blogger dengan section widget HTML/JabaScript. Untuk cara mengubah gambar PNG/JPG ke SVG, kamu bisa ikuti langkah-langkah di bawah ini.

  1. Hal pertama tentu saja kamu harus sudah memiliki gambar yang akan dikonversi ke SVG. Jika sudah punya, kunjungi website https://www.pngtosvg.com/.
  2. Setelah itu pilih bagian menu Image to Vector kemudian klik tombol Choose a file untuk mulai mengunggah gambar yang ingin dikonversikan menjadi vector atau ikon SVG.
  3. Cara Ganti Logo Header Blog Igniplex Menjadi Ikon SVG
    Konversi Gambar PNG/JPG Ke SVG
  4. Jika sudah diunggah, klik tombol Generate untuk mulai mengkonversi gambar menjadi vector ikon SVG.
  5. Cara Ganti Logo Header Blog Igniplex Menjadi Ikon SVG
    Cara Ganti Gambar Header Igniplex Menjadi Ikon SVG
  6. Jika proses konversi sudah selesai, di bagian bawah akan muncul tombol Download untuk mengunduh file vector yang sudah dikonversi. File yang sudah dikonversi akan memiliki format .svg, bukan .png lagi.
  7. Setelah file vector sudah diunduh, buka file melalui aplikasi Text Editor seperti Acode atau aplikasi lainnya. Atau jika kamu tidak memiliki aplikasi pembaca file SVG, kamu bisa kunjungi halaman preview SVG generator untuk mendapatkan kode HTML dari file SVG kamu.
  8. Selesai!

Sampai di tahap ini sudah berhasil membuat logo blog dengan format SVG atau vector. Langkah selanjutnya memasang kode HTML SVG tadi ke dalam template blog di bagian widget header. Simak dengan baik langkah-langkah di bawah ini.

Cara Mengganti Logo Gambar Header di Template Igniplex v3 dengan Ikon SVG

Sebelum lanjut mengganti logo header blog dengan ikon SVG, sebaiknya lakukan backup atau cadangkan terlebih dahulu template blog kamu. Agar ketika terjadi masalah atau kerusakan struktur template saat mengedit, kamu bisa memulihkan kembali template sebelumnya.

  1. Masuk ke menu Tema Edit HTML.
  2. Setelah itu cari widget section Header di template Igniplex kamu. Kode yang digunakan kurang lebih seperti ini:
  3. <b:section class='header' id='header' showaddelement='false'>
      <b:widget id='Header1' locked='true' title='Ignelius (Header)' type='Header' visible='true'>
        <b:widget-settings>
          <b:widget-setting name='displayUrl' />
          <b:widget-setting name='displayHeight'>0</b:widget-setting>
          <b:widget-setting name='sectionWidth'>-1</b:widget-setting>
          <b:widget-setting name='useImage'>false</b:widget-setting>
          <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
          <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
          <b:widget-setting name='displayWidth'>0</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main' var='this'>
          <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image' />
          <b:include cond='data:imagePlacement not in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='title' />
          <b:include cond='data:imagePlacement != &quot;REPLACE&quot;' name='description' />
          <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='behindImageStyle' />
        </b:includable>
        <b:includable id='behindImageStyle'>
          <b:if cond='data:sourceUrl'>
            <b:include cond='data:this.image' data='{image: data:this.image, selector: &quot;#header .widget&quot;}' name='responsiveImageStyle' />
          </b:if>
        </b:includable>
        <b:includable id='description'>
          <div class='desc h'>
            <data:this.description />
          </div>
        </b:includable>
        <b:includable id='image'>
          <a expr:href='data:blog.homepageUrl' expr:title='data:title'>
            <img expr:alt='data:title' expr:height='data:height' expr:src='resizeImage(data:sourceUrl, 300)' expr:title='data:title' expr:width='data:width' />
          </a>
          <b:include cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='title' />
        </b:includable>
        <b:includable id='title'>
          <div>
            <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced' />
            <b:if cond='data:view.isSingleItem'>
              <h2>
                <a class='tx-100' expr:href='data:blog.homepageUrl' expr:title='data:title'>
                  <data:title />
                </a>
              </h2>
              <b:else />
              <h1>
                <b:if cond='!data:view.isHomepage'>
                  <a class='tx-100' expr:href='data:blog.homepageUrl' expr:title='data:title'>
                    <data:title />
                  </a>
                  <b:else />
                  <data:title />
                </b:if>
              </h1>
            </b:if>
          </div>
        </b:includable>
      </b:widget>
    </b:section>

    Harap pastikan bahwa kode yang dihapus sesuai dengan kode di atas agar struktur kode template tidak rusak. Kode yang dihapus adalah semua kode dalam tag section <b:section class='header' id='header' showaddelement='false'>...</b:section>.

  4. Setelah itu hapus semua kode HTML di atas dan ganti dengan kode HTML di bawah ini:
  5. <b:section class='header' id='header' showaddelement='false'>
      <b:widget id='HTML00' locked='true' title='Tes Blog (Header)' type='HTML' version='2' visible='true'>
        <b:widget-settings>
          <b:widget-setting name='content'><![CDATA[<a href="/" title="Judul Blog"><!--[ masukkan kode html svg di sini ]--><svg>...</svg></a>]]></b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
          <b:include name='widget-title' />
          <div class='widget-content'>
            <data:content />
          </div>
        </b:includable>
        <b:includable id='HTML00'>
          <b:attr name='class' value='header' />
          <data:content />
        </b:includable>
        <b:includable id='widget-title'>
          <b:comment>Don&#39;t show.</b:comment>
        </b:includable>
      </b:widget>
    </b:section>
    Penting!

    Ganti kode SVG yang telah ditandai dengan kode HTML SVG yang kamu miliki. Pengaturan ikon SVG ini juga dapat diatur langsung melalui menu Layout atau Tata Letak Blogger sama seperti mengatur gambar header blog sebelumnya.

  6. Jika semua kode sudah diganti, klik simpan dan lihat hasilnya.

Penutup

Itu dia tutorial cara mengubah logo gambar header blog menjadi ikon SVG di template Igniplex versi 3. Untuk melihat demo atau hasil setelah mengubah logo header blog template Igniplex menjadi ikon SVG, kamu bisa lihat langsung logo di bagian header pada blog Ignelius ini. Blog ini juga sama menggunakan ikon SVG untuk logo di bagian header. Kamu juga bisa terapkan cara di atas di template Blogger lainnya karena metode yang digunakan adalah mengganti kode HTML widget header blog bawaan Blogger dengan widget HTML/JavaScript. Tinggal disesuaikan saja kode HTML yang digunakan di masing-masing template.

Komentar

Posting Komentar

Sebelum memposting komentar, harap baca kebijakan berkomentar terlebih dulu.

1. Untuk menulis kode syntax highlighter, gunakan <i rel="pre">KODE SYNTAX DI SINI</i> (kode harus di parse terlebih dulu).
2. Untuk menyisipkan gambar dalam komentar, gunakan <strong>URL GAMBAR</strong>.
3. Untuk menulis tautan, gunakan <a href='URL WEB TUJUAN'>Anchor Teks</a>.
4. Untuk menulis sebuah quote / kutipuan, gunakan <i rel="quote">TULIS QUOTE DI SINI</i>.
5. Centang Beri Tahu Saya untuk mendapatkan notifikasi yang dikirim langsung ke email saat ada yang membalas komentar kamu.