Menciptakan Tampilan Template yang Berbeda-Beda

Tampilan Template

Tertarik untuk membuat tampilan halaman template blogspot yang berbeda-beda pada setiap perpindahannya? Caranya sangat mudah, yaitu dengan memanfaatkan tag kondisional halaman. Format dasar mesinnya seperti ini:

<b:if cond='perbandingan kondisi'>
<style type='text/css'>

/* LETAKKAN KODE CSS KHUSUS DI SINI */

</style>
</b:if>

Cukup ganti kode LETAKKAN KODE CSS KHUSUS DI SINI dengan kode CSS yang kamu kehendaki dan mengganti kode perbandingan kondisi dengan tipe halaman tertentu » pelajari di sini

Misalnya begini: Kamu ingin membuat halaman item berubah warna menjadi merah, sementara halaman saat ini berwarna hitam karena deklarasi-deklarasi dalam selektor body {} tampak seperti ini:

body {
  background-color:#000000;
  margin:0 0;
  text-align:center;
  line-height:.5em;
  font:normal normal 13px/1.4 Trebuchet,"Trebuchet MS",Geneva,Arial,Sans-serif;
  color:$mainTextColor;
}

Untuk mengubah warna latar belakang halaman item tanpa melibatkan warna pada halaman selain di halaman item, maka kamu harus menyalin deklarasi-deklarasi beserta selektor CSS templatemu ke dalam ruang baru yang Saya tuliskan di atas, kemudian ubah kodenya menjadi seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
body {
  background-color:#9B0707;
  margin:0 0;
  text-align:center;
  line-height:.5em;
  font:normal normal 13px/1.4 Trebuchet,"Trebuchet MS",Geneva,Arial,Sans-serif;
  color:$mainTextColor;
}
</style>
</b:if>

Namun sebenarnya kamu tidak perlu repot-repot menyalin semua deklarasi di dalam selektor body, cukup letakkan deklarasi-deklarasi yang mengalami perubahan saja seperti ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
body {
  background-color:#9B0707;
}
</style>
</b:if>

Letakkan kode tersebut di atas kode </head>.

Selesai.

Meskipun di sini Saya hanya menjelaskan tentang bagaimana cara mengubah warna latar belakang, namun sebenarnya kemampuan sistem ini tidak hanya sebatas mangganti warna saja. Intinya adalah, kode CSS apapun yang kamu masukkan ke dalam wilayah kekuasaan tag kondisional hanya akan bekerja ketika kondisi halaman sekarang sesuai dengan logika tag kondisionalnya.