Lupakan font awesome ini dia rahasia ikon bawaan pada template terbaru blogger

notable template default terbaru blogger
notable, salah satu template bawaan blogger terbaru

Banyak juga para blogger menggunakan icon icon cantik untuk mempercantik tampilan antar muka blog mereka, terutama pada bagian navigasi menu. Ikon paling populer dan banyak variasinya adalah jika menggnakan ikon ikon dari font awesome. 

Namun sayang font awesome mensyaratkan pemasangan link eksternal ke dalam template, hal yang sangat merugikan kecepatan loading blog hingga 20%. Sungguh tidak sepadan membayar harga kecantikan yang tidak banyak manfaatnya dengan mengorbankan kecepatan di era blogging modern ini.

Padahal sebuah blog yang lambat akan sangat merugikan karena mesin pencari lebih mengutamakan blog yang cepat ketimbang blog yang cantik. 

Ternyata ikon yang dipergunakan oleh blogger secara default adalah proyek Google itu sendiri bentuknya adalah ikon SVG, kalau font awsome memiliki berton ton ikon, blogger secara default paling memiliki ikon hamburger menu yang kita pakai buat menutup dan membuka menu itu lho. Trus ikon panah ke kanan dan panah arah ke kiri. Tentu saja ada beberapa lusin ikon termasuk ikon flat blogger, facebook, twitter, pinterest dsb. Jadi kodenya di dalam HTML akan tampak sebagai berikut:

Contoh gambar berikut adalah ikon ikon yang paling sering dipergunakan pada template blogger seperti contempo, soho, emporio dan notable (template template varian terbaru blogspot):

ikon svg default blogger yang paling banyak di gunakan

Perhatikan contoh kode ikon Hamburger menu dalam bentuk template template terbaru contempo, soho, emporio dan notable:

<div class='hamburger-menu-container'>
<b:include data='{ iconClass: &quot;touch-icon hamburger-menu&quot; }' name='menuIcon'/>
</div>

Dan cara menuliskan ikon ikon juga harus sesuai contoh pada gambar:

  • backArrowIcon
  • forwardArrowIcon
  • searchIcon
  • shareIcon
  • menuIcon
  • dst 

Sebagai desainer yang suka re-desain kalian bisa merubah deklarasi yang saya warnai merah dengan  tulisan sharingotherIcon misalnya maka ikon garis tiga akan berubah menjadi ikon lain.

Perbedaan mencolok penerapan ikon ikon "default" terhadap template adalah pada kecepatannya. Ikon ikon ini tidak mengurangi kecepatan lari blog di web seperti halnya apabila kita menggunakan ikon ikon font awsome misalnya. Ikon ikon ini lebih sederhana, terbatas jumlahnya, mudah difahami dan lebih stabil seolah dia adalah bagian dari template blogger itu sendiri sejak orok.

Saya mengunjungi situs Blogger Code PE  tapi sayangnya tidak semua orang tentu mengerti karena blognya berbahasa Perancis dan menggunakan template contempo secara default.

Namun berikut kode ikon bawaan template terbaru blogger, Jika kalian mau mencobanya cobalah robah kode kodenya dengan:
  1. menuIcon
  2. emailIcon
  3. commentIcon
  4. flatbloggerIcon
  5. closeIcon
  6. backArrowIcon
  7. chevronDownIcon
  8. chevronUpIcon
  9. facebookIcon
  10. forwardArrowIcon
  11. linkIcon
  12. pinterestIcon
  13. searchIcon
  14. shareIcon
  15. svgIcon
  16. twitterIcon
  17. verticalMoreIcon
  18. sharingOtherIcon
  19. defaultAvatarIcon
Sebagai catatan, ikon ikon ini hanya berlaku pada template template varian terbaru seperti contempo, emporio, soho, dan notable.

BUKAN IKON SVG BUATAN PIHAK KETIGA
Kebanyakan ikon svg yang di tawarkan oleh para pengolah konten blogger adalah ikon buatan pihak ketiga. Misalnya yang biasanya kita ambil dari laman:

https://materialdesignicons.com

Akan tetapi ikon svg yang kita maksudkan disini adalah ikon ikon SVG standar bawaan template template varian terbaru blogger seperti contempo, soho, emporio dan notable.
Ikon ikon yang paling sering di tampilkan dengan contoh:
  • Ikon untuk menutup sidebar berupa panah menghadap ke kiri halaman namanya 'backArrowIcon' di dalam pengaturan widget ia di deklarasikan sebagai berikut: 

  • <b:includable id='backArrowIcon'> <b:include data='{iconId: "ic_arrow_back_black_24dp", iconClass: data:iconClass}' expr:name='data:button ? "svgIconButton" : "svgIcon"'/> </b:includable>

  • Ikon hamburger menu berupa pembuka sidebar dengan nama 'menuIcon' di dalam pengaturan widgetnya ia di deklarasikan sebagai berikut: 

  • <b:includable id='menuIcon'> <b:include data='{iconId: "ic_menu_black_24dp", iconClass: data:iconClass}' expr:name='data:button ? "svgIconButton" : "svgIcon"'/> </b:includable>

  • Ikon kaca pembesar untuk membuka kolom pencarian dengan nama 'searchIcon' di dalam pengaturan widgetnya ia di deklarasikan sebagai berikut: 

  • <b:includable id='searchIcon'> <b:include data='{iconId: "ic_search_black_24dp", iconClass: data:iconClass}' expr:name='data:button ? "svgIconButton" : "svgIcon"'/> </b:includable>

  • Dan beberapa ikon lain dalam jumlah terbatas.
Jadi sekarang kita tahu ikon ikon tersebut memang telah dipasang dan embed secara alamiah di dalam struktur template varian terbaru blogpsot sebagai ikon default (bawaan) bukan buatan pihak ketiga

Atau lebih lengkapnya untuk melihat daftar ikon ikon svg default ini adalah sbb:

  1. &quot;flat-icon-button ripple&quot; }' name='shareIcon'/> | 
  2. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='defaultAvatarIcon'/> | 
  3. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='flatbloggerIcon'/>  | 
  4. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='facebookIcon'/> | 
  5. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='twitterIcon'/> | 
  6. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='pinterestIcon'/> | 
  7. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='emailIcon'/> | 
  8. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='chevronDownIcon'/> | 
  9. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='chevronUpIcon'/> | 
  10. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='backArrowIcon'/> | 
  11. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='linkIcon'/> | 
  12. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='commentIcon'/> | 
  13. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='forwardArrowIcon'/> | 
  14. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='verticalMoreIcon'/> | 
  15. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='sharingOtherIcon'/> | 
Penjelasan :
  • Area yang di beri hightlight warna kuning adalah pemanggil untuk setiap jenis icon
  • iconClass: " flat-icon-button " adalah seleksi class bagian tombol icon
Sedangkan pengaturan CSS-nya adalah:
.svg-icon-24 {width:24px:height:24px}

 Kalian dapat mengganti ukuran 24 menjadi 28, 29, 30...dst. 

12 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. INteresting.
    Nanti coba saya cari mana yg disebut Hamburger menu terebut.
    Jujur, kalau ada ilmu baru dan tak lihat ga gitu rumit dan bermanfaat ingin mencoba.

    BalasHapus
  2. Oh banyak juga ya icon blogger. Tapi sayangnya belum tahu caranya ganti icon blogger

    BalasHapus


  3. Gada contoh gambar iconnya 😆

    Iya w3schol memang menganjurkan pakai svg tapi aku gatau cara bikin svg dari hp 😆

    Tapi pakai kode entities css & html juga kyknya bagus gan ringan untuk icon tapi mgkn kurang menarik, » &larr ada juga kode emot.

    w3schools.com/cssref/css_entities.asp

    BalasHapus
    Balasan
    1. Yang di maksud disini bukan ikon svg biasa dari pihak ketiga buatan https://materialdesignicons.com, tapi benar benar default platform blogger ikon dan jumlahnya terbatas 19 buah itu.

      Contoh cara menulis menu icon svg buatan pihak ketiga buatan material design harus di tulis dan diterapkan ke dalam template sbb: <svg style="width:24px;height:24px" viewBox="0 0 24 24">
      <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
      </svg>

      Sementara kalau menu ikon buatan blogger bawaan ditulisnya sbb: menIcon pada bagian HTML/XML tertentu, ia benar benar telah ditanam ke dalam template terbaru berikut atribut pengaturannya

      Hapus
    2. Dengan kata lain memiliki pengaturan dasar di dalam HTML /XML sbb:

      <b:includable id='svgIconButton'>
      <button class='svg-icon-24-button'>
      <b:class expr:name='data:iconClass'/>
      <svg class='svg-icon-24'>
      <use expr:xlink:href='"/responsive/sprite_v1_6.css.svg" fragment data:iconId'
      xmlns:xlink='http://www.w3.org/1999/xlink'/>
      </svg>
      </button>
      </b:includable>

      Dan parameternya:

      <b:include name='svgIconButton'/>

      Atau:

      <b:include data='{ ITEMS }' name='svgIconButton'/>

      Benar benar telah ditulis ke dalam template template spt contempo, soho, emporio dan notable secara default

      Hapus
  4. bahas icon ya, heem, ilmu daging nih, tapi saya salut dengan satu blog yang lambat tapi pengunjungnya banyak banget, blognya adalah ainamulyana.blogspot.com, bukan promosi ya, he-he

    BalasHapus
    Balasan
    1. 1. Jangan salah, ia telah blogging sejak tahun 2011, jika dibanding dengan blog baru mulai tahun 217, waktu itu blogging adalah hal hebat dan pasti dapat pengunjung banyak. Bloggingnya serius dan konsisten.
      Pada pencarian namanya sudah jadi 'anchor' yang kuat.
      2. Niche pendidikan yang konsisiten
      3. Memiliki komunitas besar.
      4. Kecepatan aktual blog beliau ini juga sebenarnya adalah 2.7 second untuk 4G dan 5.1 second untuk 3G (kecepatan sedang) pada parameter :

      https://www.thinkwithgoogle.com/feature/testmysite/

      Jadi tidak buruk buruk amat.

      5. Kontennya ya ampunn banyak sekali. Wajar halaman tersebut di butuhkan.

      Traffiknya juga cenderung fluktuatif
      Beliau ini juga memiliki banyak sekali blog yang konsisten. Jangan coba coba tiru karena era modern blogging tidak spt itu lagi.

      Ini adalah masukan yang bagus.

      Hapus
  5. wah.. simpel gituu ya mba anisa, enak dibaca hehe

    BalasHapus
  6. Enak sebetulnya kalau bisa edit blog bawaan blogger

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak