Cara Membuat Background Agar Berbeda Sesuai Dengan Kategori

Cara membuat background berbeda sesuai kategori

Cara membuat background berbeda sesuai kategori, KRtutorplus.com – Sudah lama tidak posting mengenai blogger, biar sedikit mengobati rasa rindu mereka yang menantikan Kang Rohman posting lagi mengenai blogger, ini ada tutorial mengenai Cara membuat background berbeda sesuai kategori/label.

Bila anda sedikit memperhatikan, ada perbedaan tampilan background pada posting yang di beri kategori/label Panduan blogger dan Panduan Wordpress pada blog ini :






Background tersebut memang akan secara otomatis berubah sesuai dengan kategori pada posting yang sedang anda baca. Rupanya ada yang tertarik dengan trik tersebut dan menanyakan bagaimana cara membuatnya.

Perlu diketahui bahwa blogger mempunyai if conditional label yang bisa mengontrol apapun sesuai dengan label, misal bisa mengubah-ubah tampilan blog anda secara keseluruhan (konsep blogazine), bisa mengontrol tampilan iklan (iklan ingin tampil/tidak ingin tampil pada kategori tertentu), menampilkan/tidak menampilkan sidebar dan lain-lain. Intinya, anda bisa berbuat banyak dengan label bila anda mengetahui triknya.

OK, biar tidak terlalu melebar kemana-mana sementara ini kita fokus membahas bagaimana membuat background berbeda sesuai kategori. Kode dasarnya seperti ini :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;nama kategori&quot;'>
<style type='text/css'>
Kode CSS
</style>
</b:if>
</b:loop>

Yang harus diperhatikan adalah dimana background tersebut ingin di tempatkan? Bila merujuk kepada blog kang Rohman, background ditempatkan pada bagian body posting, kode CSS nya kebetulan seperti ini :

.post-body{margin:0 0 .85em; line-height:1.6em; padding:0px;overflow: hidden;}

Secara default, setiap posting tidak akan mempunyai background. Nah, disinilah peran if conditional label bermain agar pada label tertentu mempunyai background. Misal pada nama label : Panduan blogger, kang rohman memasang kode seperti ini :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;panduan blogger&quot;'>
<style type='text/css'>
.post-body{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5-EnQZ3xVz6RUGrAWhUfA9oUQvePWlF_yL-7MlVPyoi7yncDZQOOkgOsTxLvFDoh8Tq77OMCuTF6MKQ6dYGoqfLDlkNheGn_mOWhwUkdLnPWJ8ylN7b5k9vNzDm3d7OjgN5O6QM4YuOV/s1600/bg_blogger.png) no-repeat top right;}
</style>
</b:if>
</b:loop>

Gambar Background yang di pasang adalah seperti ini :



Dan alamat gambar tersebut adalah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5-EnQZ3xVz6RUGrAWhUfA9oUQvePWlF_yL-7MlVPyoi7yncDZQOOkgOsTxLvFDoh8Tq77OMCuTF6MKQ6dYGoqfLDlkNheGn_mOWhwUkdLnPWJ8ylN7b5k9vNzDm3d7OjgN5O6QM4YuOV/s1600/bg_blogger.png


Pada nama label : Panduan Wordpress, kang rohman memasang kode seperti ini :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;panduan wordpress&quot;'>
<style type='text/css'>
.post-body{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghZ1tiAeCCIlCLwv6_9DCWn0CLPufBbCH8scQ_DSU_-ACidvgLKfELgp7Fjzj_fsLrJkTYeOfhIHAOdreqpe-qyVovs0-4LBlv32quP6XssspIo7DaWT2hOf213_fbzwlC1YNGxrWHrOP-/s1600/bg_wp.png) no-repeat top right;}
</style>
</b:if>
</b:loop>

Background yang di pasang adalah seperti ini :



Dan alamat gambar tersebut adalah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghZ1tiAeCCIlCLwv6_9DCWn0CLPufBbCH8scQ_DSU_-ACidvgLKfELgp7Fjzj_fsLrJkTYeOfhIHAOdreqpe-qyVovs0-4LBlv32quP6XssspIo7DaWT2hOf213_fbzwlC1YNGxrWHrOP-/s1600/bg_wp.png

Sudah, itu saja magic nya. Setiap artikel yang di beri label : panduan blogger dan panduan wordpress akan secara otomatis mempunyai background sesuai gambar yang di pasang.


Demikian tutorial tentang Cara membuat background berbeda sesuai kategori semoga bermanfaat.