INILAH RAHASIA IKON BAWAAN TEMPLATE TERBARU BLOGGER

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 10%. 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.
www.editblogtema.net

Komentar

  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

Posting Komentar

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE