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

Your Ads Here

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.

See also: Cara Lengkap Memasang Link Di Sidebar Pada Wordpress Beserta Gambar 2019

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;}

See also: Cara Lengkap Edit, Quick Edit, Unapprove, Spam dan Trash Setiap Komentar Pada Wordpress 2019

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 :

Your Ads Here

Your Ads Here

Dan alamat gambar tersebut adalah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8-4xdt2ZYB_S-YBuzbQ1fZ07s_UlIYaiPdEIN-kmMFnJ22SDb1cpjyhS4vjxyAT3C0wwgDZqwE10sZiC9HxvgIYtdnn8yh6wxll6OeI3riWgDaUZGhAn-TytJ1B6XbioRfDyCLMiLdkz8/s1600/bg_blogger.png

See also: Tips Dan Trik Bagaimana Sebelum Terjadinya Kesalahan Fatal Setting permalink Pada Wordpress 2019

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 :

See also: Cara Paling Mudah Disable / Non-Aktifkan Klik Kanan Pada Image / Gambar Pada Blogger Dan Wordpress 2019

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

Your Ads Here