Kelas Spesifik pada Tag Body

Cara termudah untuk menambahkan kelas spesifik pada tag <body> berdasarkan tipe halaman adalah dengan mencantumkan nilai atribut kelas berupa data:blog.pageType seperti ini:

<body expr:class='data:blog.pageType'>

Dengan cara di atas, maka blog Kita akan memiliki kelas spesifik pada tag <body> yang nilainya akan menyesuaikan diri berdasarkan tipe halaman yang sedang diakses.
Kemungkinan akan muncul lima macam nama kelas yaitu:

index
item
archive
static_page
error_page

Jika Kita ingin menambahkan lebih dari satu kelas, Kita bisa memisahkannya menggunakan simbol + dan beberapa " Misalnya:

<body expr:class='&quot;loading &quot; + data:blog.pageType'>

Kode di atas nantinya akan menghasilkan markup HTML seperti ini:

<body class='loading tipe_halaman'>

Lalu Bagaimana dengan Halaman Muka, Halaman Label dan Pencarian?

Untuk menambahkan kelas spesifik berdasarkan kondisi-kondisi halaman yang tidak termasuk di dalam data:blog.pageType, caranya menjadi sedikit rumit. Kita harus menambahkan sesuatu berupa elemen divisi tepat setelah tag <body>, kemudian kita tambahkan kelas-kelas tertentu berdasarkan kondisional halaman yang nantinya akan kita terapkan satu per satu. Tag yang kita pakai harus diubah menjadi karakter entitas HTML agar bisa lolos dari editor HTML Blogger:

...
<body>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    &lt;div class=&#39;home-page&#39;&gt;
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      &lt;div class=&#39;item-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      &lt;div class=&#39;archive-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
      &lt;div class=&#39;error-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      &lt;div class=&#39;static-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.searchLabel'>
      &lt;div class=&#39;label-page&#39;&gt;
    </b:if>
    <b:if cond='data:blog.searchQuery'>
      &lt;div class=&#39;search-page&#39;&gt;
    </b:if>
  </b:if>

  <!-- Konten blog di sini -->

  &lt;/div&gt;
</body>

Saat Kita melihat kode sumber blog Kita melalui peramban, harusnya markup HTML akan tampak kurang lebih seperti ini:

...
<body>
  <div class='kelas-spesifik'>
    ...
  </div>
</body>

Untuk Apa Kita Melakukan Ini?

Ya, mungkin Kita ingin membuat warna latar artikel yang berbeda-beda berdasarkan tipe halaman. Saat Kita berhasil menerapkan ini, maka Kita bisa menuliskan kode CSS pada selektor yang diawali oleh nama kelas tersebut untuk membatasi penerapan deklarasi:

.post {
  background-color:white; /* default */
}

.home-page .post {
  background-color:red; /* warna latar artikel saat sedang berada di halaman muka */
}

.item-page .post {
  background-color:orange; /* warna latar artikel saat sedang berada di halaman item */
}

.static-page .post {
  background-color:green; /* warna latar artikel saat sedang berada di halaman muka */
}

.archive-page .post {
  background-color:gold; /* warna latar artikel saat sedang berada di halaman arsip */
}

.error-page .post {
  background-color:blue; /* warna latar artikel saat sedang berada di halaman error */
}

.label-page .post {
  background-color:violet; /* warna latar artikel saat sedang berada di halaman label */
}

.search-page .post {
  background-color:brown; /* warna latar artikel saat sedang berada di halaman hasil pencarian */
}

Sumber : www.dte.web.id

Kelas Spesifik pada Tag Body

Lalu Bagaimana dengan Halaman Muka, Halaman Label dan Pencarian?

Untuk Apa Kita Melakukan Ini?

0 comments:

Posting Komentar