GO Blog

Pernah berkunjung ke blog kang rohman ? jika pernah, sobat akan melihat dua perbedaan yang begitu jelas antara warna background header dan posting per label. ketika sobat membaca posting yang berlabel blogger maka sobat akan melihat warna header dengan tampilan orange dan background posting dengan logo blogger, dan ketika sobat membaca posting dengan label wordpress maka tampilan header pun akan berubah menjadi biru dan postingan tampil dengan background logo wordpress. sebenarnya, trik ini juga bisa diterapkan dalam blog sobat, karena caranya juga tidak begitu sulit dengan sedikit pemahaman sebuat kode if conditional dan css.

Langsung saja kita bahas trik untuk "Membuat tampilan template berbeda dengan tag Conditional" ini.

Contoh awal: Misalnya anda memiliki blog tutorial, dan blog tersebut memiliki dua label dengan topik berbeda dan anda ingin memberi warna background dalam setiap posting label tersebut dengan warna yang sesuai topik. seperti label widget dengan background biru dan seo dengan background berwana merah, maka kode yang bisa kita gunakan dengan tag conditional category adalah seperti berikut:

CSS default dalam kondisi standart

.post { width:100%; 
           margin:0 auto; 
           background: #efefef;
           padding:10em 5em;
           border:none;
           text-align:left;
           font-family: 16em 'Geosefani' arial, georgia, sanserif;
           color:#333;
}

lalu kita buat tag conditional seperti berikut

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;kategori satu&quot;'>
css yang di inginkan
<b:else/>
<b:if cond='data:label.name == &quot;kategori dua&quot;'>
css yang di inginkan
</b:if>
<b:else/>
<b:if cond='data:label.name == &quot;kategori tiga&quot;'>
css yang di inginkan
</b:if>
</b:if>
</b:loop>

kemudian kita hanya perlu meletakkan css nya di antara kode tag conditional categorinya, seperti di bawah ini:

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;tool&quot;'>
.post { width:100%; 
           margin:0 auto; 
           background: #6495ed;
           padding:10em 5em;
           border:none;
           text-align:left;
           font-family: 16em 'Geosefani' arial, georgia, sanserif;
           color:#333;
}
<b:else/>
<b:if cond='data:label.name == &quot;seo&quot;'>
.post { width:100%; 
           margin:0 auto; 
           background: #1e90ff;
           padding:10em 5em;
           border:none;
           text-align:left;
           font-family: 16em 'Geosefani' arial, georgia, sanserif;
           color:#333;
}
</b:if>
<b:else/>
<b:if cond='data:label.name == &quot;widget&quot;'>
.post { width:100%; 
           margin:0 auto; 
           background: #191970;
           padding:10em 5em;
           border:none;
           text-align:left;
           font-family: 16em 'Geosefani' arial, georgia, sanserif;
           color:#333;
}
</b:if>
</b:if>
</b:loop>

Yang saya beri warna biru adalah css yang nanti berubah warna ketika dalan label yang di integrasikan dan warna merah adalah label yang di pilih. kode di atas untuk tiga label, jika sobat ingin lebih banyak atau satu saja tinggal tambahkan/hapus  kode:

<b:else/>
<b:if cond='data:label.name == &quot;kategori&quot;'>
css yang di inginkan
</b:if>

Tempatkan kode di atas seperti yang sudah ada di bawah tag penutup sebelumnya.

Cara mengaplikasikan ke template:

Sebelum mengedit lebih baik backup dulu template anda untuk pemulihan ketika terjadi kesalahan

1. Silahkan login ke blogger anda
2. Klik Menu dropdown lalu pilih Template
3. Klik tombol Edit HTML
4. Cari kode <data:post.body/> (gunakan CTRL+F untuk pencarian cepat) :
5. Copy paste kode tag Conditional yang sudah sobat buat seperti di atas persis diatas kode tadi: <data:post.body/>
6. Kemudian Simpan perubahan

Contoh di atas hanya sebuah trik merubah warna background, jika sobat ingin merubah warna tulisan, jarak, gaya font, lebar dan lainnya sobat bisa terapkan sendiri dengan memahami css yang sobat inginkan seperti header, footer, main-wrapper ataupun yang lainnya. trik ini juga bisa di gunakan untuk memunculkan widget, iklan atau tampilan hanya pada label category yang kita inginkan.

Semoga berguna dan selamat mencoba...