Sobat bosen dengan tampilan blog sobat?sekedar berbagi ilmu,bagaimana caranya warna background pada home page berbeda dengan tampilan saat membaca posting blog,seperti blog saya.mau tau cara'a gan?Cekidot gan...
Untuk dapat merubah tampilan blog,cara yang kita gunakan hanya CSS3 dan HTML b:if cond yang sudah saya kasih tau di artikel 5 Kode HTML Untuk Mengatur Tampilan Blog.yang kita lakukan sekarang,hanya merubah css pada tampilan posting,kita tidak perlu menambah kode HTML lagi pada primary CSS/homepage.disini saya hanya akan share trik sederhana untuk mengganti background.
yang kita akan gunakan adalah kode HTML:
<b:if cond='data:blog.pageType == "item"'> isi widget </b:if>
Dan CSS external dengan Style HTML:
<style type='text/css'> Isi CSS </style>
TRik pertama: merubah warna background pada Halaman posting.
Sobat copy paste dulu kode HTML di bawah ini
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
isi CSS
</style>
</b:if>
letakan kode diatas kode </head>
Setelah itu,jangan disimpan dulu,jangan lupa copy paste CSS background sobat.
Contoh:
misalkan background pada blog sobat bewarna hitam=#000000; (kode hexadecimal)
seperti dibawah ini
<b:skin><![CDATA[/*
body {
background:#000000;
}
]]></b:skin>
tinggal copy paste saja CSS'a menjadi seperti di bawah ini
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
body {
background:#000000;
}
</style>
</b:if>
background'a kan masih warna hitam,ganti warna backgroundnya agar beda ^^
misalkan kita ganti ke warna Putih=#ffffff;
contohnya menjadi seperti dibawah ini
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
body {
background:#ffffff;
}
</style>
</b:if>
lalu disimpan deh,lihat hasilnya pasti halaman homepage dan halaman posting,warna'a akan berbeda ^^
untuk trik merubah warna font,posting,navbar,footer,header,caranyapun sama,kita hanya copy css'a saja.
saya sengaja tidak share karena tiap template,mempunyai nama css yang berbeda tiap templatenya.
untuk body,sudah umum dan tidak pernah beda dengan template lain,
sobat bisa berkreasi sendiri,dengan cara copy paste primary css sobat ke css external yang kita coba tadi.sobat harus pintar2 pintar nih ngeditnya ^^
oia,satu lagi nih..kalau backgroundnya ingin diganti dengan gambar,tambahkan
" url(url gambar); "
Contoh:
body {
background:#ffffff url(http://urlgambarkamu.jpg);
background-attachment: fixed;
}
background-attachment: fixed; digunakan agar posisi gambar tetap/tidak berubah saat kita scroll halaman ke atas/kebawah.contohnya seperti blog saya
selamat mencoba,dan jangan lupa komentar kalau ada galat atau masalah,thanks...
Komentar
Posting Komentar