Cara Membuat Gambar Berbeda - Beda Sesuai Label / Katagori Pada Wordpress 2019

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

Background tersebut memang akan secara otomatis berubah sesuai dengan kategori pada posting yang sedang anda baca.

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? 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 : All About Blogger memasang kode seperti ini :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;all about blogger&quot;'>
<style type='text/css'>
.post-body{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8-4xdt2ZYB_S-YBuzbQ1fZ07s_UlIYaiPdEIN-kmMFnJ22SDb1cpjyhS4vjxyAT3C0wwgDZqwE10sZiC9HxvgIYtdnn8yh6wxll6OeI3riWgDaUZGhAn-TytJ1B6XbioRfDyCLMiLdkz8/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/AVvXsEj8-4xdt2ZYB_S-YBuzbQ1fZ07s_UlIYaiPdEIN-kmMFnJ22SDb1cpjyhS4vjxyAT3C0wwgDZqwE10sZiC9HxvgIYtdnn8yh6wxll6OeI3riWgDaUZGhAn-TytJ1B6XbioRfDyCLMiLdkz8/s1600/bg_blogger.png

Pada nama label : All About Wordpress, memasang kode seperti ini :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;all about wordpress&quot;'>
<style type='text/css'>
.post-body{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqn0WAIt4SfoBNOmZtcjsCLYsp5A96EFSDnJifyXTX2k7MY90GpcCrIKVVdSJ5WSZAxojuYJJWY754SKr4mFiNkyFSv0IRG-a0RxNIT_LmXf88B3lTnyKeMbSqzvgTi9pfjtxbbqtAwkCk/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/AVvXsEjqn0WAIt4SfoBNOmZtcjsCLYsp5A96EFSDnJifyXTX2k7MY90GpcCrIKVVdSJ5WSZAxojuYJJWY754SKr4mFiNkyFSv0IRG-a0RxNIT_LmXf88B3lTnyKeMbSqzvgTi9pfjtxbbqtAwkCk/s1600/bg_wp.png

Sudah, itu saja magic nya. Setiap artikel yang di beri labelakan secara otomatis mempunyai background sesuai gambar yang di pasang.

Terima Kasih Telah Berkunjung

#SemogaBermanfaat
#SalamNewbieBlogger