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 ?

    • Rosyd Aqbar

      bingung pak nerapinya :-a

    • Surga Kenari

      keren asli :-bd

    • 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

    • Irfan Muhammad Ghani

      gan kalau kondisinya pada halaman label yang lebih spesifik gimana? misalnya tampilan label komputer akan berbeda dengan tampilan label android?

    Komentar telah ditutup.