Membuat Tampilan Halaman Postingan Berbeda Menurut Label Dengan Javascript
Terkadang kita merasa jenuh dengan tampilan blog kita, sehingga hal ini tentu saja akan mengganggu acara ngeblog kita.Hasrat dan ilham menulis pun menjadi hilang terbawa arus bosan yang melanda. Hehehe kesudahannya jadi puitis banget ya....
Untuk mengobati penyakit bosan akan tampilan blog yang sering melanda blogger ini, yuk mari kita buat tampilan halaman postingan berbeda-beda.
Membedakan tampilan halaman postingan ini sanggup kita buat menurut label postingan. Kita sanggup menciptakan perubahan pada header, halaman postingan, sidebar, hingga perubahan pada footer pada suatu halaman menurut label postingan.
Triknya ialah memperlihatkan
class pada body menurut label dengan javascript. Seperti pada thumbnail di atas, terdapat perbedaan pada kedua halamannya. Menghilangkan beberapa element pada halaman dengan label tertentu.Kode javascriptnya menyerupai berikut:
<b:if cond='data:blog.pageType == "item" and data:post.labels'><b:loop values='data:post.labels' var='label'><b:switch var='data:label.name'>
<b:case value='Product'/>
<script type='text/javascript'>
//<![CDATA[
document.body.className += ' post-label';
//]]>
</script>
</b:switch></b:loop></b:if>
Product ialah label postingan, maka pada semua halaman dengan label postingan Product akan ditambahkan class=' post-label' pada tag body.Jika ingin menambahkan label lainnya maka silahkan tambahkan isyarat berikut pada isyarat di atas.
<b:case value='Kosmetik'/>
<script type='text/javascript'>
//<![CDATA[
document.body.className += ' post-label2';
//]]>
</script>
Sehingga isyarat pertama akan tampak menyerupai di bawah ini.
<b:if cond='data:blog.pageType == "item" and data:post.labels'><b:loop values='data:post.labels' var='label'><b:switch var='data:label.name'>
<b:case value='Product'/>
<script type='text/javascript'>
//<![CDATA[
document.body.className += ' post-label';
//]]>
</script>
<b:case value='Kosmetik'/>
<script type='text/javascript'>
//<![CDATA[
document.body.className += ' post-label2';
//]]>
</script>
</b:switch></b:loop></b:if>
Lakukan hal yang sama kalau ingin menambahkan label lainnya. Simpan isyarat di atas pada bab postingan menyerupai di bawah ini.
<b:includable id='post' var='post'>
<article class='post hentry'.........>
..............
..............
</article>
KODE TADI DI SINI
</b:includable>
Setelah itu silahkan buat style menyerupai berikut untuk mengatur tampilannya.
body.post-label .header {
....................
}
body.post-label2 .header {
.....................
}
body.post-label .post {
......................
}
body.post-label2 .post {
......................
}
body.post-label .post .post-footer{
......................
}
Dan lainnya.
Bagaimana, gampang bukan? Selamat mencoba....
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Tampilan Halaman Postingan Berbeda Menurut Label Dengan Javascript"
Posting Komentar