Topanzone™

CSS (Cascading Style Sheet) biasanya digunakan untuk template sebuah situs untuk mengatur atau mengedit elemen warna, pixel, jenis dan ukuran huruf dan sebagainya yang tampil pada halaman situsnya. Dalam wordpress anda dapat langsung mengedit CSS yang anda inginkan di dalam halaman admin tanpa harus menggunakan html/css editor. Bagaimana pun saya tidak akan mendetail tentang CSS di sini. Jadi untuk melihat kode CSS pada blog anda pertama kali anda tinggal masuk ke halaman lalu pilih menu tampilan dan sub menu penyunting tema.

Hal yang perlu kita ketahui yang saya jadikan sebagai contoh di sini adalah halaman blog kita (berdasarkan tema 3C) adalah putih polos dan dalam kode warna css ditulis dengan FFFFFF. Pada dasarnya kode pewarnaan css berdasarkan kode bilangan hexadesimal berbasis 16 angka. Angka-angka tersebut adalah angka 0-9 ditambah a-f (melambangkan angka 1-15). Biasanya kita menggunakan bilangan desimal pada kehidupan sehari-hari dan bilangan ini biasa di sebut dengan bilangan berbasis sepuluh yang memiliki angka (0-9). Jadi FFFFFF tadi adalah bilangan hexadesimal yang melambangkan warna putih. Untuk warna-warna lain juga dilambangkan dengan 6 digit bilangan hexadesimal.

Bilangan Hexadesimal

0 1 2 3 4 5 6 7 8 9 A B C D E F

Bilangan Desimal

0 1 2 3 4 5 6 7 8 9

Bilangan hexadesimal FFFFFF merupakan bilangan dengan nilai tertinggi dengan 6 digit angka. Pada dasarnya konsep pewarnaan pada css menunjukkan bahwa semakin tinggi nilai dari bilangan hexadesimal penunjukan warna maka warna tersebut semakin terang sebaliknya jika semakin rendah maka warna tersebut semakin gelap. Jika anda menggunakan html editor seperti Dreamweaver atau 1st page maka dapat dengan mudah menentukan warna-warna dengan pilihan poligon warna tanpa perlu mengetahui kode bilangan hexadesimal sebelumnya.

Eversoft 1st Page 2006 adalah salah satu software yang bisa digunakan untuk hal ini. Setelah anda bisa menjalankan program tersebut. Pada layar pertama anda pilih saja blank page, selanjutnya pada menu toolbar pilih tags lalu klik pick color maka akan memunculkan pilihan warna poligon berdasar bilangan hexadesimal.

Sekarang anda tinggal memilih warna yang sesuai untuk blog anda. masuk ke halaman edit tema wordpress, di sini saya mencontohkan mengganti header dengan warna kuning terang.

Maka anda tinggal mengganti kode css bagian header seperti kode css di bawah.

/* – - – HEADER STYLES – - – */

#header {

background-color: #FF9900;

border-bottom: 1px solid #666666;

padding: 0;

Setelah itu anda simpan perubahannya dan lihat kembali situs blog anda

Oh iya, fungsi CSS di sini tidak hanya terbatas pada mengubah warna tetapi juga dapat mengubah jenis huruf, ukuran huruf dan warna huruf dan sebagainya. Berikut salah satu contoh mengubah tampilan huruf pada header khususnya mengubah huruf pada nama dan slogan blog.

Tampilan awal kode CSS:

.blogname {

font-family: Verdana, Tahoma, sans-serif;

font-size: 26px;

color: #666666;

}

.blogslogan {

font-family: Verdana, Tahoma, sans-serif;

font-size: 18px;

color: #000000;

Anda dapat ubah menjadi:

.blogname {

font-family: Arial, Helvetica, sans-serif;

font-size: 28px;

color: #666666;

}

.blogslogan {

font-family: Arial, Helvetica, sans-serif;

font-size: 20px;

color: #cdcdcd;

Pada perubahan tadi anda telah mengubah tipe huruf, ukuran dan warnanya. Anda juga dapat menambahkan sebuah latar belakang pada header anda degan menambahkan gambar latar belakang pada folder wp-content/theme/3clr-seo(contoh theme disini)/image. Selanjutnya anda masukkan kode seperti di bawah ini pada bagian header style.

#header {

background-color: #FF9900;

background-image: url(‘image/masukkan nama gambar anda di sini.jpg’);

border-bottom: 1px solid #666666;

padding: 0;

 

Pada tahap selanjutnya anda dapat mengubah tampilan lainnya selain header seperti mengubah tampilan main content, left dan right sidebar.

Selamat mencoba, semoga sedikit banyak bisa bermanfaat.

Download Eversoft 1st Page 2006

Catatan: contoh diatas adalah berdasarkan themes 3 clr-seo. Bisa mas2/mbak2 utak atik sendiri dengan theme yang lain.

Reff: panduan ngeblog dengan wordpress, wikipedia, wordpress.org, easywebtutorial