Mecha versi 2.6.4 sudah dirilis!

Menciptakan Tampilan Template yang Berbeda-Beda

tag kondisional css
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.

16 Komentar

Andi AF Studio

lama juga gak mampir kemari :D
bener2 luar binasa, wkwkwkwk..

Unknown

mas lain kali bikin tutorial template yang sederhana dunk, , yang bebas credits link orang luar . . hehe

Taufik Nurrohman

@Bayu Aldi Yansyah: Masalahnya, kalau masih belum paham soal tag kondisional, pasti tidak akan bisa memahami tutorial ini, jadi harus mempelajari tag kondisional dulu untuk bisa mengikutinya. Lagipula, Saya tidak suka dengan model-model tutorial yang cuma mengandalkan copy dan paste kode saja. Itu tidak mendidik.

Unknown

waaww turotialnya mantap templatenya juga mantap :)
om admin kalo mau berlanggan artikel blog ini lewat email gimana ? hehe :D

tipasundan

mantap sobat semua tutorial nya. langsung ke TKP. :-bd

Unknown

@Taufik Nurrohman Semangat nich generasi oprek-oprek Templete, kalau bang taufik semangat kayak Suhendri Purnama jugakah dulu, sewaktu masih baru kenal blog ?? kalau saya yach gitu juga dulu sampai sekarang nanya mulu ndak mahir-mahir.

Unknown

mas taufik,kalau boleh tau, template DTE:] ini dasarnya dari template standard blogger, atau apa ?

Unknown

sepertinya memang pake template jadul blogger ya.. :D

azewBz

mas`kalau buat setiap halaman posting berbeda" sama kaya tutor ini ga?
kaya blog urang kurai.!! jdi bisa memasukan code Body{ tapi tidak terpengaruh pada halaman homepage.

Taufik Nurrohman

Saya sudah pernah menulis teknik baru CSS individual untuk blogspot —hack— meta deskripsi untuk menyisipkan kode CSS sesuai prosedur HTML di sini ⇒ Solusi Meletakkan Kode CSS Kustom Blogazine Blogspot Sesuai Prosedur Dokumen HTML
Sudah Saya tes sampai sekarang dan semuanya aman-aman saja :-bd Kalau mengenai CSS berbeda-beda setiap posting seperti blog UrangKurai itu kebanyakan cuma ditempel saja kode CSS-nya di dalam posting. Tidak perlu tag kondisional apapun.

Komentar telah ditutup.