Menambahkan Kelas Spesifik pada Tag `<body>` Berdasarkan Tipe Halaman
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:
indexitemarchivestatic_pageerror_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 Comments:
iya nih mantap pake multiple class, dulu udah kepikiran di kepala saya tapi yaa, pake < b:if > aja lebih seru hehe...
Ini susah banget aku terapkan kak ?
bingung pak nerapinya :-a
keren asli :-bd
keren super om :)
- salam damai -
kalau halaman index, malah error HTML5 ya mas.
contoh.
<b:if cond='data:blog.pageType == "index"'>
<div class='aab-page'>
</b:if>
Maaf mas, pertanyaannya diralat, saya kurang teliti, ternyata kode ini </div> gak saya sertakan. ^_^
Error-nya bagaimana? Kalau secara umum mungkin karena tidak ada tag penutupnya.
nice info gan, makasih
baru kali ini kunjungan ke blog yg isinya keren sperti ini
pokoknya mantep dah
gan kalau kondisinya pada halaman label yang lebih spesifik gimana? misalnya tampilan label komputer akan berbeda dengan tampilan label android?
<b:if cond='data:blog.searchLabel == "Komputer"'>
→ /2012/10/tag-kondisional-halaman-label-dan.html
Post a Comment
<< Home