Cara agar Tampilan Background home page dan Halaman Post berbeda (Tutorial)

Home Page

Post Page

yang kita lakukan sekarang, hanya merubah css pada tampilan posting, kita tidak perlu menambah kode HTML lagi pada primary CSS/homepage.

disini penulis hanya akan share trik sederhana untuk mengganti background. yang kita akan gunakan adalah kode HTML: 

<b:if cond='data:blog.pageType == &quot;item&quot;'> isi widget </b:if>

Dan CSS external dengan Style HTML: 

<style type='text/css'> Isi CSS </style>

Pertama: merubah background pada Halaman posting dengan " url(url gambar); "

Copy paste kode HTML di bawah ini, kemudian letakan diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

body

{
background:#ffffff url(http://urlgambarkamu.jpg);
background-attachment: fixed;
} </style>
</b:if>

background-attachment: fixed; digunakan agar posisi gambar tetap/tidak berubah saat kita scroll halaman ke atas/kebawah.

Kalau backgroundnya ingin diganti dengan warna tanpa gambar, gunakan kode HTML di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
body {
background:#000000;
}
</style>
</b:if>

Note : Kode  CSS #000000 (HITAM) Bisa diganti sesuai selera.

Misalkan kita ganti ke warna Putih ( #ffffff ), contohnya menjadi seperti dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
body {
background:#ffffff;
}
</style>
</b:if>

lalu disimpan ,lihat hasilnya pasti halaman homepage dan halaman posting,Tampilannya akan berbeda. untuk merubah warna font,posting,navbar,footer,header caranya pun sama,kita hanya copy css'a saja.

Penulis sengaja tidak share karena tiap template, mempunyai nama css yang berbeda tiap templatenya. untuk body, sudah umum dan tidak pernah beda dengan template lain, sahabat bisa berkreasi sendiri, dengan cara copy paste primary css blog ke css external yang kita coba tadi.

Salam Sahabat,