Minggu, 04 September 2011

Merubah tampilan homepage dan halaman posting

Sobat bosen dengan tampilan blog sobat? sekedar berbagi ilmu,bagaimana caranya warna background pada home page berbeda dengan tampilan saat membaca posting blog . 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.

kode html:
<b:if cond='data:blog.pageType == &quot;item&quot;'> isi widget </b:if>
css:
<style type='text/css'> Isi CSS </style>
pertama: merubah warna background pada Halaman posting. copy paste dulu kode HTML di bawah ini
kode:
<b:if cond='data:blog.pageType == &quot;item&quot;'> <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
kode:
<b:skin><![CDATA[/* body { background:#000000; } ]]></b:skin>
tinggal copy paste saja CSS'a menjadi seperti di bawah ini
open:
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> body { background:#000000; } </style> </b:if>
misalkan kita ganti ke warna Putih=#ffffff; contohnya menjadi seperti dibawah ini
open:
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> body { background:#ffffff; } </style> </b:if>
kalau backgroundnya ingin diganti dengan gambar,tambahkan " url(url gambar); "
open:
body { background:#ffffff url(http://urlgambarkamu.jpg); background-attachment: fixed; }
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 selamat Mencoba

0 komentar:

Poskan Komentar