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.
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):
Contoh gambar berikut adalah ikon ikon yang paling sering dipergunakan pada template blogger seperti contempo, soho, emporio dan notable (template template varian terbaru blogspot):
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: "touch-icon hamburger-menu" }' name='menuIcon'/>
</div>
Dan cara menuliskan ikon ikon juga harus sesuai contoh pada gambar:
- backArrowIcon
- forwardArrowIcon
- searchIcon
- shareIcon
- menuIcon
- dst
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:
- menuIcon
- emailIcon
- commentIcon
- flatbloggerIcon
- closeIcon
- backArrowIcon
- chevronDownIcon
- chevronUpIcon
- facebookIcon
- forwardArrowIcon
- linkIcon
- pinterestIcon
- searchIcon
- shareIcon
- svgIcon
- twitterIcon
- verticalMoreIcon
- sharingOtherIcon
- 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:
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:
- Dan beberapa ikon lain dalam jumlah terbatas.
<b:includable id='searchIcon'> <b:include data='{iconId: "ic_search_black_24dp", iconClass: data:iconClass}' expr:name='data:button ? "svgIconButton" : "svgIcon"'/> </b:includable>
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:
"flat-icon-button ripple" }' name='shareIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='defaultAvatarIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='flatbloggerIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='facebookIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='twitterIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='pinterestIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='emailIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='chevronDownIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='chevronUpIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='backArrowIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='linkIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='commentIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='forwardArrowIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' name='verticalMoreIcon'/>
|<b:include data='{ button: true, iconClass: "flat-icon-button ripple" }' 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.
informatif
BalasHapusDapat diterapkan😊
HapusINteresting.
BalasHapusNanti coba saya cari mana yg disebut Hamburger menu terebut.
Jujur, kalau ada ilmu baru dan tak lihat ga gitu rumit dan bermanfaat ingin mencoba.
Oh banyak juga ya icon blogger. Tapi sayangnya belum tahu caranya ganti icon blogger
BalasHapusWow info yang menarik
BalasHapus
BalasHapusGada 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
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.
HapusContoh 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
Dengan kata lain memiliki pengaturan dasar di dalam HTML /XML sbb:
Hapus<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
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
BalasHapus1. 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.
HapusPada 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.
wah.. simpel gituu ya mba anisa, enak dibaca hehe
BalasHapusEnak sebetulnya kalau bisa edit blog bawaan blogger
BalasHapus