Merubah Tampilan Headings Blog

Heading yang mempunyai arti kepala, pasti kepala tempatnya diatas.. ya iyalah
masa di bawah.. he.. he.. Seperti halnya juga headings di blog yang tempatnya
diatas tapi jangan salah Saya kali ini tidak membahas tentang header blog tapi
melainkan headings yang biasa ditulis dalam code HTML dan CSS adalah seperti h2,
h3, h4 dan sebagainya, Contoh headings di blog adalah seperti judul posting,
judul sidebar, tanggal posting dan judul blog.



Seperti biasa tutorial kali ini saya akan coba membahas tentang cara
memodifikasi CSSnya, untuk merubah tampilan headings di blog kita hal yang harus
kita lakukan adalah mengotak-atik CSS (cascading style sheets) dari yang standar
ke bentuk yang kita inginkan.



Oke langsung saja Saya akan jelaskan satu persatu dan cara memodifikasinya...

Masuk menu Layout kemudian masuk
Edit HTML untuk mengota-atik CSSnya



Merubah tampilan Judul Posting



Jika Anda ingin merubah tampilan judul posting Anda maka code CSS yang harus
Anda cari adalah seperti dibawah ini



.post h3 {

------------

-------------

-------------

-------------

}



Merubah Tampilan Judul Sidebar



Cari code CSS dibawah ini



.sidebar h2{

------------

-------------

-------------

-------------

}



Merubah Tampilan Judul Blog di Header



Cari CSS dibawah ini



#header h1 {

------------

-------------

-------------

-------------

}



Merubah Tampilan Tanggal Posting



Cari CSS dibawah



h2.date-header {

------------

-------------

-------------

-------------

}



Perhatikan Code CSS yang berwarna merah
saja karena yang lainya adalah definisinya.

Nah sekarang kita lanjut ke cara otal-atik CSSnya biar tampilanya oke punya.



Ganti garis putus-putus dari code CSS diatas dengan definisi dibawah ini



margin:5px;

padding:5px;

border:1px
dotted #000000;

Khusus Margin, Padding dan Border

baca artikel ini



font-size:140%;


untuk menentukan besarnya huruf , bisa kamu ubah sesuai selera kamu misalnya
kamu ubah menjadi 100% atau
150% dan juga satuanya bisa kamu ganti
dengan px (pixels) misalnya 14px.



font-weight:bold;

Untuk menentukan ketebalan huruf, Bold
adalah jika kamu ingin hurufnya tebal apabila kamu ingin merubah hurufnya biasa
ganti bold dengan normal, dan apabila
kamu ingin mengganti hurufnya menjadi miring kamu ganti saja dengan code
italic.



text-align:right;

Untuk menempatkan posisi text jika kamu isi dengan
right maka text akan berada di kanan dan
apabila kamu isikan left text akan
berada di kiri dan juga center maka
textnya akan berada di tengah.



color:#FFFFFF;

Untuk memberi warna huruf, #FFFFFF
adalah code warna untuk warna putih carilah code warna yang sesuai dengan
keinginan kamu di
http://colorschemer.com/online.



Background:#000000;

untuk memberi warna background. silahkan ganti code warna sesuai keinginan kamu
di
http://colorschemer.com/online untuk mencari code warna.



text-transform:uppercase;

uppercase untuk menampilkan hurufnya
dengan huruf besar semua meski dalam pengaturan anda menuliskan huruf kecil.
jika Anda ingin mengubah dengan huruf kecil semua ganti dengan
lowercase dan jika ingin huruf depanya
saja yang besar maka ganti dengan capitalize.



Nah jika di blog Anda pasti CSSnya sudah ada definisinya tinggal mengedit dan
menambahi yang kurang-kurang saja.



Sekian dulu artikel ini Saya rangkum dari berbagai sumber salah satunya dengan
sistem browsing dan baca
artikel dari kang
rohman.

Semoga bermanfaat bagi Anda....

Artikel Lainnya