Mecha versi 2.6.4 sudah dirilis!

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

Tabel Konten
  1. Lalu Bagaimana dengan Halaman Muka, Halaman Label dan Pencarian? 
  • Untuk Apa Kita Melakukan Ini? 

    • 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 */
}

    11 Komentar

    Damar Zaky

    iya nih mantap pake multiple class, dulu udah kepikiran di kepala saya tapi yaa, pake < b:if > aja lebih seru hehe...

    IRIL SAGITA

    Ini susah banget aku terapkan kak ?

    no data

    keren super om :)
    - salam damai -

    Unknown

    kalau halaman index, malah error HTML5 ya mas.
    contoh.
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    &lt;div class=&#39;aab-page&#39;&gt;
    </b:if>

    Taufik Nurrohman

    Error-nya bagaimana? Kalau secara umum mungkin karena tidak ada tag penutupnya.

    Unknown

    Maaf mas, pertanyaannya diralat, saya kurang teliti, ternyata kode ini </div> gak saya sertakan. ^_^

    Irfan Muhammad Ghani

    nice info gan, makasih
    baru kali ini kunjungan ke blog yg isinya keren sperti ini
    pokoknya mantep dah

    Komentar telah ditutup.