Mengganti ikon template Blogger

Ikon template Blogger v3

Ikon dalam template bawaan tema Blogger versi 3 terletak dibeberapa titik, antara lain:
1. Menu hamburger (hamburger-menu)
2. Tombol kembali (sidebar-back)
3. Tombol buka pencarian (search-expand)
4. Tombol submit pencarian (search-action)
5. Tombol share atas dan bawah postingan.
6. Ikon media share:
    6.1 Share link
    6.2 Facebook
    6.3 Twitter
    6.4 Pinterest
    6.5 Email.

Mengapa ikon bawaan tema perlu diganti ?

Sebenarnya mengganti ikon atau tidak, itu tergantung pada admin masing-masing. Karena ada kalanya seorang admin blog mengganti atau menghilangkan ikon tersebut adalah untuk penyesuaian tampilan. Atau bisa juga menyesuaikan tampilan ikon agar lebih seragam atau menjadi sejenis karena memasukkan ikon baru dengan cirihas tampilan yang berbeda dengan ikon bawaan tema. Dan mungkin masih banyak alasan lain yang mengharuskan penggantian ikon tersebut.

Tujuan postingan ini adalah menunjukkan elemen ikon beserta lokasinya didalam template Blogger versi 3, terutama untuk ikon utamanya seperti yang tertera dibawah ini.

HTML ikon dalam template

Ikon-ikon yang terpasang dalam template biasanya dikemas dalam tag b:include melalui data layout bukan sebagai tag elemen HTML umumnya oleh karena itu memerlukan sedikit pengetahuan mengenai data layout untuk menemukannya. Atau jika bisa menggunakan Chrome Devtool dapat lebih mudah lagi menemukan lokasi ikon berdasarkan atribut class-nya. Kecuali ikon media berbagi.

Tombol menu (open sidebar)

Dibawah ini beberapa kode HTML ikon yang terdapat dalam template tema Blogger versi 3.
Gunakan teks yang berada didalam name='' yang disediakan dibarisan nama tema sebagai kata kunci untuk melakukan pencarian elemen / lokasi kode didalam template.

^1.1 Tema Contempo - name='menuIcon'

<b:include data='{ button: true, iconClass: "hamburger-menu flat-icon-button ripple" }' name='menuIcon'/>

^1.2Tema Soho - name='menuIcon'

<b:include data='{ iconClass: "touch-icon hamburger-menu" }' name='menuIcon'/>

^1.3Tema Emporio - name='menuIcon'

<b:include data='{ iconClass: "touch-icon hamburger-menu" }' name='menuIcon'/>

^1.4Tema Notable - name='menuIcon'

<b:include data='{ button: true, iconClass: "hamburger-menu flat-icon-button ripple" }' name='menuIcon'/>

Tombol close sidebar

^2.1 Tema Contempo - name='backArrowIcon'

<div class='navigation'>
  <b:include data='{ button: true, iconClass: "flat-icon-button ripple sidebar-back" }' name='backArrowIcon'/>
</div>

^2.2 Tema Soho - name='backArrowIcon'

<div class='navigation'>
  <b:include data='{ iconClass: "touch-icon sidebar-back rtl-reversible-icon" }' name='backArrowIcon'/>
</div>

^2.3 Tema Emporio - name='closeIcon'

<div class='navigation'>
  <b:include data='{ iconClass: "touch-icon sidebar-back" }' name='closeIcon'/>
</div>

^2.4 Tema Notable - name='forwardArrowIcon'

<div class='navigation'>
  <b:include data='{ button: true, iconClass: "sidebar-back flat-icon-button ripple" }' name='forwardArrowIcon'/>
</div>

Tombol Search

Tombol Search berdasarkan HTML templatenya disetiap tema terdapat ikon, ditandai dengan atribut name='searchIcon'.
Untuk teks pada tombol Search ditandai dengan tag data layout seperti ini :
<data:messages.search/>.
Apabila salah satu elemen tersebut (teks/ikon) tidak ditampilkan dalam tombol, berarti elemen tersebut dihilangkan melalui CSS dengan property: display:none;.
Ganti dengan display:block; untuk menampilkan elemen.
Untuk menemukan CSS teks tombol Search, cari selektor : .search-expand-text
Untuk menemukan CSS ikon tombol Search, cari selektor : .search-expand-icon

^3.1 Tema Contempo

Khusus pada tema Contempo tombol Search tidak terdapat teks, hanya ikon saja.

<button class='search-expand touch-icon-button' expr:aria-label='data:messages.search.escaped'>
  <div class='flat-icon-button ripple'>
    <!-- [hapus kode ikon dibawah ini untuk mengganti] -->
    <b:include data='{ iconClass: "search-expand-icon" }' name='searchIcon'/>
  </div>
</button>

^3.2 Tema Soho & Emporio (teks dan ikon)

<button class='search-expand touch-icon-button' expr:aria-label='data:messages.search.escaped'>
  <!-- [ kode teks tombol ] -->
  <div class='search-expand-text'><data:messages.search/></div>
  <!-- [hapus kode ikon dibawah ini untuk mengganti] -->
  <b:include data='{ iconClass: "touch-icon search-expand-icon" }' name='searchIcon'/>
</button>

^3.3 Tema Notable (teks dan ikon)

<button class='flat-button search-expand touch-icon-button' expr:aria-label='data:messages.search.escaped'>
  <!-- [ kode teks tombol ] -->
  <div class='search-expand-text'><data:messages.search/></div>
  <div class='search-expand-icon flat-icon-button'>
    <!-- [hapus kode ikon dibawah ini untuk mengganti] -->
    <b:include name='searchIcon'/>
  </div>
</button>

Ikon pengganti

Sebagai alternatif untuk pengganti ikon-ikon tersebut, lihat di halaman Google SVG Ikon atau dihalaman Koleksi ikon SVG favorit

⇐ Sebelumnya

Selanjutnya ⇒

Coding Blogger