Cara Membuat Tampilan Halaman Post Berbeda Berdasar Label

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 == &quot;item&quot; 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 == &quot;item&quot; 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{

 ......................

}
 Dll

Copas dari http://www.kompiajaib.com/2017/06

membuat-tampilan-halaman-postingan.html