DTE :]

Friday, November 2, 2012

Menambahkan Kelas Spesifik pada Tag `<body>` Berdasarkan Tipe Halaman

Pembaharuan 2018/05/09: Kelas HTML Otomatis untuk Blogger

Menambahkan Kelas yang Berbeda-Beda pada Tag Body berdasarkan Tipe Halaman
Tipe halaman berubah peran menjadi nama kelas 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 Anda 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 Anda ingin menambahkan lebih dari satu kelas, Anda bisa memisahkannya menggunakan simbol + dan beberapa &quot; 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 Anda melihat kode sumber blog Anda 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 Anda ingin membuat warna latar artikel yang berbeda-beda berdasarkan tipe halaman. Saat Anda berhasil menerapkan ini, maka Anda 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 */
}

Labels: ,

posted by Taufik Nurrohman at November 02, 2012

11 Comments:

Post a Comment



<< Home