Kelas HTML Otomatis untuk Blogger

Rabu, 09 Mei 2018

Tabel Konten

Berikut ini adalah berbagai metode untuk menambahkan kelas otomatis berdasarkan kondisi halaman pada tema Blogger. Kelas ini nantinya dapat Anda gunakan untuk memodifikasi tema tanpa harus membungkus setiap kode CSS di dalam tag kondisional halaman yang spesifik.

Metode 1: Versi Lama

<html expr:class='data:blog.pageType'>
  …
</html>

.post { /* gaya posting di semua halaman */ }

.archive .post { /* gaya posting di halaman arsip */ }
.error_page .post { /* gaya posting di halaman kesalahan */ }
.index .post { /* gaya posting di halaman indeks */ }
.item .post { /* gaya pisting di halaman item */ }
.static_page .post { /* gaya posting di halaman statis */ }

Metode 2: Versi Baru

<html expr:class='data:view.type'>
  …
</html>

.post { /* gaya posting di semua halaman */ }

.error .post { /* gaya posting di halaman kesalahan */ }
.feed .post { /* gaya posting di halaman arsip, indeks, label, pencarian */ }
.item .post { /* gaya posting di halaman item dan statis */ }

Metode 3: Versi Manual

<html>
  <b:class cond='data:view.isArchive' name='is-archive'/>
  <b:class cond='data:view.isError' name='is-error'/>
  <b:class cond='data:view.isHomepage' name='is-home'/>
  <b:class cond='data:view.isLabelSearch' name='is-tags'/>
  <b:class cond='data:view.isMultipleItems' name='is-items'/>
  <b:class cond='data:view.isPage' name='is-page'/>
  <b:class cond='data:view.isPost' name='is-post'/>
  <b:class cond='data:view.isPreview' name='is-preview'/>
  <b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='is-search'/>
  <b:class cond='data:view.isSingleItem' name='is-item'/>
  …
</html>

.post { /* gaya posting di semua halaman */ }

.is-items .post { /* gaya posting di halaman indeks */ }
.is-item .post { /* gaya posting di halaman item */ }

.is-archive .post { /* gaya posting di halaman arsip */ }
.is-error .post { /* gaya posting di halaman kesalahan */ }
.is-home .post { /* gaya posting di halaman muka */ }
.is-tags .post { /* gaya posting di halaman label */ }
.is-page .post { /* gaya posting di halaman statis */ }
.is-post .post { /* gaya posting di halaman posting */ }
.is-preview .post { /* gaya posting di halaman pratinjau */ }
.is-search .post { /* gaya posting di halaman pencarian */ }

Terkait: Tag Kondisional Halaman Blogger 2017