Menambahkan Kelas Spesifik pada Tag `<body>` Berdasarkan Tipe Halaman
Tabel Konten
Pembaharuan 2018/05/09: Kelas HTML Otomatis untuk Blogger
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 "
Misalnya:
<body expr:class='"loading " + 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'>
<div class='home-page'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='item-page'>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<div class='archive-page'>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div class='error-page'>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='static-page'>
</b:if>
<b:if cond='data:blog.searchLabel'>
<div class='label-page'>
</b:if>
<b:if cond='data:blog.searchQuery'>
<div class='search-page'>
</b:if>
</b:if>
<!-- Konten blog di sini -->
</div>
</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 == "index"'>
<div class='aab-page'>
</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?
Taufik Nurrohman
→ /2012/10/tag-kondisional-halaman-label-dan.html