Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 11 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!