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

Diposting Oleh:
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. 

Baca Juga:

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

Labels

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi apple ARM Art Of War artikel sabtu asesories autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa bank btn batam beautiful beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blockquote blog blogcomments blogger bloggerhelp blogging Blogging mobile bloging blogspeed blogspot bluetooth bootstrap border dash breadcrumb browser btn mobile bugs Buku business capital letter cara catatan catatan awal tahun Cek IMEI Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codepen coding compose compose view contact form contempo contempo base contempo blackmagic contempo hibrida contempo hybrid converter coolest copy-paste copyright covid 19 covid_19 cowok CPC credit footer css CTR cuitan curhat cybercrime Dahlan Iskan dark mode dasbor data default Demo desain diblokir dirtylink disway DOM domain domain authority Donald Trump download download template terbaru dropdown earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik Elle Darby embed emoji emporio emporio hybrid english error essential expires header expires headers facebook fakta fanpage fast loading template fastloading template favicon featured posts feed burner firefox fitur fixed fixed sidebar font font awsome footer footer link Footer navigasi forbes Free friendship fuchsia full stacks furure g-suite gadget gagdet galeri gambar gambar bergoncang gambar profile penulis gambar responsive game generasi Alpha Generasi Z geng motor genius gerhana girl gmail Gmetrix gong xi fa cai good news google google chrome Google Domain google drive google font Google honemoon google Plus google search console google webmaster Googlewebmaster gradasi warna grafik gramedia gratis grid style GTmetrix h1 Habibie hack hacker halaman web hamburger menu hanya opini hapus hari bumi harimau heading headings heart secret hewan hoax hobi hotpink HTM5 html HTML view huawei hukum human Idulfitri Iklan ikon Imlek in memories indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram intel inteligensia internal link internasional internet internt interntet interntt intert iOS iPad iPadOS iPhone isu IT italia Jaime Ocabo java JavaScript jimdo jin Ping jingling Jokowi jQuery JSitor kaca pembesar kafe kalimantan kalkulus kamera kanonis kartun keamanan keamanan blogger kebijkan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword khusus kiata G+ klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi kota kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label laptop lay out lay out version 3 theme layarlipat layout lazyload lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation moz myths nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengusaha Penulis perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perubahan pexel phablet PHP plagiat plagiator PlagScan play store polemik politik ponsel popularitas popularposts portable powered by blogger Powerpoint prediksi premium privasi produk profesi profile programmer programming programming. prosesor pseudo-sains psikologi Python rahasia ramalan ranking faktor rawgit re-desain re-desain tema blogger React Reactions read more recentPosts redesain related posts remaja resolusi responsinator responsive review robot robot.txt sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars sticky sidebar sticky widget Strategi SEO Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tabel tablet tabs2 tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan template template premium template premium gratis template SOHO template versi ke-2 terkemuka tes popularitas testimoni testmysite text theme Thucydides tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorialKhusus twitter uang UAS unduh unik update urang utan ustazd Abdul Somad vanilla Script video viomagz viral virus corona vlogging vue w3-css w3school W3Shool wabah warna web web story WebAssembly webdesign WEBP website whatsapp widget wifi ID windows Windows Mobile wisata WIX wordpress X-Frame xiomi xml yandex youtube youtuber z-index
Tampilkan selengkapnya

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Downoad Notable simple yang pas buat blog curhat

Download Update Template Blogger Notable simple versi kedua