Ditulis oleh: Ditulis pada: 6/07/2017
Terkadang kita merasa jenuh dengan tampilan blog kita, sehingga hal ini tentu saja akan mengganggu aktivitas ngeblog kita.Hasrat dan ide menulis pun menjadi hilang terbawa arus bosan yang melanda. Hehehe kesannya 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 bisa kita buat berdasarkan label postingan. Kita bisa membuat perubahan pada header, halaman postingan, sidebar, sampai perubahan pada footer pada suatu halaman berdasarkan label postingan.
Triknya adalah memberikan
class pada body berdasarkan label dengan javascript. Seperti pada thumbnail di atas, terdapat perbedaan pada kedua halamannya. Menghilangkan beberapa element pada halaman dengan label tertentu.Kode javascriptnya seperti 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 adalah 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 kode berikut pada kode di atas.
<b:case value='Kosmetik'/>
<script type='text/javascript'>
//<![CDATA[
document.body.className += ' post-label2';
//]]>
</script>
Sehingga kode pertama akan tampak seperti 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 jika ingin menambahkan label lainnya. Simpan kode di atas pada bagian postingan seperti 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 seperti 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, mudah bukan? Selamat mencoba....