Menambahkan Kelas Spesifik Pada Tag `≪Body≫` Menurut Tipe Halaman

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

Beda pada Tag Body menurut Tipe Halaman Menambahkan Kelas Spesifik pada Tag `<body>` Berdasarkan Tipe Halaman — Tipe halaman berubah tugas menjadi nama kelas pada tag **<body>**

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

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

Dengan cara di atas, maka blog Anda akan mempunyai kelas spesifik pada tag <body> yang nilainya akan beradaptasi menurut 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 dapat memisahkannya memakai simbol + dan beberapa " Misalnya:

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

Kode di atas nantinya akan menghasilkan markup HTML menyerupai ini:

<body class='loading tipe_halaman'>

Lalu Bagaimana dengan Halaman Muka, Halaman Label dan Pencarian?

Untuk menambahkan kelas spesifik menurut kondisi-kondisi halaman yang tidak termasuk di dalam data:blog.pageType, caranya menjadi sedikit rumit. Kita harus menambahkan sesuatu berupa elemen divisi sempurna sehabis tag <body>, kemudian kita tambahkan kelas-kelas tertentu menurut kondisional halaman yang nantinya akan kita terapkan satu per satu. Tag yang kita pakai harus diubah menjadi huruf entitas HTML semoga dapat 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 isyarat sumber blog Anda melalui peramban, harusnya markup HTML akan tampak kurang lebih menyerupai ini:

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

Untuk Apa Kita Melakukan Ini?

Ya, mungkin Anda ingin menciptakan warna latar artikel yang berbeda-beda menurut tipe halaman. Saat Anda berhasil menerapkan ini, maka Anda dapat menuliskan isyarat 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 ketika sedang berada di halaman muka */ }  .item-page .post {   background-color:orange; /* warna latar artikel ketika sedang berada di halaman item */ }  .static-page .post {   background-color:green; /* warna latar artikel ketika sedang berada di halaman muka */ }  .archive-page .post {   background-color:gold; /* warna latar artikel ketika sedang berada di halaman arsip */ }  .error-page .post {   background-color:blue; /* warna latar artikel ketika sedang berada di halaman error */ }  .label-page .post {   background-color:violet; /* warna latar artikel ketika sedang berada di halaman label */ }  .search-page .post {   background-color:brown; /* warna latar artikel ketika sedang berada di halaman hasil pencarian */ }

Sumber https://www.dte.web.id/