
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.
- Hal pertama tentu saja kamu harus sudah memiliki gambar yang akan dikonversi ke SVG. Jika sudah punya, kunjungi website
https://www.pngtosvg.com/
. - 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.
- Jika sudah diunggah, klik tombol Generate untuk mulai mengkonversi gambar menjadi vector ikon SVG.
- 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. - 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.
- 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.
- Masuk ke menu Tema Edit HTML.
- Setelah itu cari widget section Header di template Igniplex kamu. Kode yang digunakan kurang lebih seperti ini:
- Setelah itu hapus semua kode HTML di atas dan ganti dengan kode HTML di bawah ini:
- Jika semua kode sudah diganti, klik simpan dan lihat hasilnya.
<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 {"REPLACE", "BEFORE_DESCRIPTION"}' name='image' />
<b:include cond='data:imagePlacement not in {"REPLACE", "BEFORE_DESCRIPTION"}' name='title' />
<b:include cond='data:imagePlacement != "REPLACE"' name='description' />
<b:include cond='data:imagePlacement == "BEHIND"' 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: "#header .widget"}' 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 == "REPLACE"' name='title' />
</b:includable>
<b:includable id='title'>
<div>
<b:class cond='data:this.imagePlacement == "REPLACE"' 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>
.
<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't show.</b:comment>
</b:includable>
</b:widget>
</b:section>
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.
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.
Posting Komentar