Jadi Pintar Mengganti Font Awesome Dengan Icon Svg Loading Lebih Cepat

Kemarin semenjak mas +Adhy Suryadi menciptakan postingan wacana cara memakai icon SVG (Scalable Vector Graphics) pribadi aku praktek pada blog ini untuk mengganti semua icon font awesome dengan icon SVG ini semoga loading blog lebih super cepat alasannya tidak perlu me-load script js eksternal dan muncul bersamaan dengan teks postingan, apalagi icon SVG ini mempunyai banyak pilihan.

Sebetulnya masih ada pilihan lain selain icon SVG ini adalah material icon milik google sendiri namun belum banyak pilihan icon yang tersedia, mungkin kedepannya google akan menambah icon untuk dapat dipakai secara maksimal pada blog.

Dengan memakai icon SVG ini browser hanya me-load icon yang kita gunakan saja, contohnya blog ini hanya memakai icon home, media sosial, author, label/tag, kalender, dan navigasi maka hanya icon itu saja yang diload oleh browser. Jika kita memakai icon dengan script js eksternal yang berisi semua icon lengkap, maka akan ada banyak icon yang tidak terpakai tapi tetap ter-load oleh browser.

Dengan kata lain blog ini sudah tidak memakai font awesome lagi, terbukti loading lebih cepat. Sekarang bagaimana dengan anda? ya itu terserah anda sih alias gak ikut-ikutan. Namun jikalau anda ingin memakai icon SVG ini, dapat anda simak tutornya di blog kompiaiab.com

Jadi Akil Cara Gampang Mengubah Semua Icon Blog Dengan Svg Icon

Selamat berjumpa kembali dengan aku admin blog yang keren dikit tapi, biar anda sehat selalu. Jika sebelumnya aku memposting perihal tentang mengganti icon svg untuk mempercepat loading blog. Kali ini aku akan sedikit mengulas lebih detail / rinci untuk mengubah semua icon blog dengan svg icon yang bahwasanya sudah dibahas oleh mas +Adhy Suryadi dalam postingannya.

Jika biasanya icon sebuah blog memakai font awesome yang masih harus me-load script js eksternal yang mungkin akan mengganggu loading blog pada koneksi lelet / lambat, apalagi pada susukan mobile. Dengan menggantinya dengan icon svg, maka icon akan eksklusif muncul menyerupai halnya teks postingan, jadi sama sekali tidak mengganggu loading blog dan eksklusif muncul meski pada koneksi lambat / susukan mobile.

Bagaimana, ingin mengubah icon blog anda dengan svg icon? mari simak pelajaran selanjutnya.

Pertama-tama kita harus menghapus script font awesome (anggap saja blog anda memakai font awesome) supaya dapat terlihat perubahannya nanti.

Kemudian kita harus menuju pada situs Material Design Icon kemudian klik icon yang akan kita gunakan kemudian pilih view SVG pada tombol </>. Kemudian simpan semua instruksi icon tersebut di notepad supaya tidak lebih mudah.

Selanjutnya kita akan mengganti icon font awesome melalui edit html, untuk lebih gampang pencarian semua icon font awesome, tekan Ctrl+F. Karena ada banyak icon, jadi kita ketik <i class= saja. Kemudian tinggal kita ganti saja instruksi tersebut dengan instruksi yang kita simpan di notepad tadi sesuai dengan icon yang kita inginkan. Sebaiknya instruksi svg dibentuk satu baris jangan ada enter.

Biasanya instruksi pemanggil font awesome menyerupai ini;

<i class='fa fa-home'/>

dan icon svg menyerupai ini;

<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>

kita tinggal mengatur style dan fill-nya, tapi aku lebih suka menciptakan css style diluar icon supaya lebih leluasa mengeditnya sehingga menjadi menyerupai ini;

<svg viewBox="0 0 24 24"><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>

kemudian kita dapat mengatus css-nya menyerupai ini

 .home svg {width:24px;height:24px;vertical-align:middle;}
 .home svg path{fill:#444}

Sebagai pola aku praktekkan disini hasil editing icon breadcrumbs blog ini yang mempunyai instruksi menyerupai ini;

<div class='breadcrumbs'>
 <span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'>
 <a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
 <span itemprop='title'><i class='fa fa-home'/> Home&amp;nbsp;</span></a></span>&amp;nbsp;<i class='fa fa-tags'/>
 <b:loop values='data:post.labels' var='label'>
 <span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'>
 <a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
 <b:if cond='data:label.isLast != &quot;true&quot;'> <i class='fa fa-angle-right'/>
 </b:if></span>
 </b:loop>
 <i class='fa fa-angle-right'/> <span><data:post.title/></span>
 </div>

sesudah instruksi yang ditandai diatas diganti dengan icon svg, secara keseluruhan menjadi menyerupai ini;

<div class='breadcrumbs'>
 <span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'>
 <a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
 <span itemprop='title'>
 <svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/></svg> Home&amp;nbsp;</span></a></span>&amp;nbsp;
 <svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z'/></svg>
 <b:loop values='data:post.labels' var='label'>
 <span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'>
 <a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'>
 <svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
 </b:if></span>
 </b:loop>
 <svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg> <span><data:post.title/></span>
 </div>

maka css style untuk instruksi diatas menyerupai ini;

.breadcrumbs svg{width:16px;height:16px;vertical-align:middle;}
 .breadcrumbs svg path{fill:#666}

Saya rasa cukup demikian saja perihal Cara Praktis Mengubah Semua Icon Blog Dengan SVG Icon. Kode diatas hanya pola saja, jadi silahkan sesuaikan dengan instruksi pada blog anda. Semoga bermanfaat dan selamat mencoba...

Jadi Cendekia Mengganti Icon Simple Share Button Dengan Icon Svg On Javascript

Postingan ini aku buat gara-gara ngoprek HTML blog untuk mempercepat loading blog dengan mengganti icon font awesome dengan icon SVG kemarin. Sedikit ada hambatan pada tombol share sebab dikala mengganti icon-nya, tombol share malah menghilang tanpa bekas. Jika biasanya icon SVG ini kita paste di HTML, untuk tombol share harus kita paste ke javascript. Perlu diperhatikan bahwa kalau ingin mengganti icon yang ada didalam javascript dengan icon SVG (jika tidak berfungsi), maka icon SVG-nya harus dibentuk satu baris dihentikan ada enter. menyerupai itulah kata mas +Adhy Suryadi.

Oke cukup sudah penjelasannya, kita kembali pada judul diatas bagaimana mengganti icon tombol share sederhana yang pernah aku bagikan (by template kompi males). Simak baik-baik pelajaran berikut ini:

Langkah pertama

Silahkan simak postingan aku sebelumnya wacana cara menciptakan simple share bottom untuk mempercepat loading blog.

Langkah kedua

Cari dan ganti arahan dibawah ini (pada langkah pertama);

 <script type='text/javascript'>
 //<![CDATA[
 var siteurl = window.location.href;
 document.write('<div class="sharethis"><div class="share"> \
 <a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
 <i class="fa fa-google-plus goplus"></i> Google</a> \
 <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
 <i class="fa fa-facebook fbi"></i> Facebook</a> \
 <a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=username_twitter&related=username_twitter" target="_blank" title="Share to Twitter">\
 <i class="fa fa-twitter tewe"></i> Twitter</a> \
 \
 </div>\
 <div class="clear"></div></div> \
 ');
 //]]>
 </script>

dengan arahan berikut;

 <script type='text/javascript'>
 //<![CDATA[
 var siteurl = window.location.href;
 document.write('<div class="sharethis"><div class="share"> \
 <a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
 <svg viewBox="0 0 24 24"><path d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" /></svg> Google</a> \
 <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
 <svg viewBox="0 0 24 24"><path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" /></svg> Facebook</a> \
 <a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=username_twitter&related=username_twitter" target="_blank" title="Share to Twitter">\
 <svg viewBox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" /></svg> Twitter</a> \
 \
 </div>\
 <div class="clear"></div></div> \
 ');
 //]]>
 </script>

Langkah ketiga

Kemudian tambahkan arahan css berikut pada css yang ada pada langkah pertama;

 .gp svg,.fb svg,.tw svg{width:20px;height:20px;vertical-align:middle;}
 .gp svg path,.fb svg path,.tw svg path{fill:#fff}

Selesai... kini simple share bottom blog anda tidak lagi memakai icon font awesome.
Dan selamat mencoba...

Jadi Berilmu Yang Saya Lakukan Dikala Modifikasi Template Kompi Males V6 Fast Loading

Sejak blog ini berganti wajah dari kompi flexible menjadi kompi males v6, ada yang nanya via email ke saya ini blog pake template kompi males v6 tapi kok gak sama dengan yang di demo kompiajaib ya? ya saya jawab saja bahwa saya sudah mengedit sesuai impian saya, terutama fitur-fitur yang tidak saya butuhkan alasannya yaitu kadang menunjukkan dampak aktual terhadap blog saya ini. Seperti widget langganan email, 3 sistem komentar, tombol sosmed (bukan tombol share ya) dan tombol login, dan lain-lain. Tapi semua itu saya edit di blog percobaan bukan di blog utama supaya tidak mensugesti kinerja google.

Oke kini saya share bagaimana saya merubah template kompi males menjadi ibarat kini ini (jika nanti tidak ganti template lagi) simak saja yang baik-baik, jangan lupa sambil ngopi juga boleh semoga gak ngantuk.

baca juga: Modifikasi template supaya loading lebih cepat

Body
Saya merubah semua warna dasar putih pada body color:#fff menjadi abu-abu color:#fafafa, kecuali bab postingan tetap putih.

Menu
Pada sajian saya gunakan warna yang sama color:#fafafa, hanya saya menambahkan box-shadow supaya tidak menyatu dengan body dan terlihat lebih elegan. Kemudia saya juga menambahkan dampak warna hijau dikala disorot (a:hover).

outer-wrapper
Saya tetap memakai background putih dengan menambahkan dampak box-shadow supaya terlihat lebih elegan dan minimalis.

Footer
Dibagian footer 1 tetap widget google plus follower, tapi pada footer 2 3 dan 4 saya ganti dengan widget recent post multi label, menghapus widget langganan email dan about me. Menghapus footer 6 dan hanya memakai footer 5 dengan width:100% dan diisi dengan label full.

Komentar
Saya hanya memakai 1 sistem komentar disqus saja, comment blogger dan facebook saya hapus supaya loading lebih cepat. Kenapa disqus kok bukan blogger? meski comment blogger katanya lebih cepat namun setiap komen harus reload halaman dan tidak ada notifikasi akhir komentar.

Font Google
Jika biasanya link font ibarat ini

<link href='https://fonts.googleapis.com/css?family=Roboto:300,300i,500,700,500i,900' rel='stylesheet'/>

itu akan sedikit mengganggu loading alasannya yaitu browser harus load link external. Makara saya buat jadi inline di html. Anda dapat simak postingannya berikut ini:
Font Face Google Inline di HTML

Selain itu saya juga mengganti semua icon font awesome dengan svg material icon. Jika kita perhatikan link untuk font awesome ibarat ini;

<link href='https://cdn.rawgit.com/KompiAjaib/font-awesome-4.6.3/master/css/font-awesome.min.css' rel='stylesheet'/>

dan bila kita susukan link tersebut, maka kita akan menemukan banyak icon yang tak terpakai. Biasanya hanya icon user, label, panah kanan kiri, home, dll. Untuk merubah hal tersebut, dapat anda simak postingan berikut ini; cara merubah font awesome dengan svg material icon

Oke itulah bab terpenting yang biasa saya lakukan terhadap template blog. Semoga bermanfaat dan dapat membantu..