Styling Konten WordPress

Gak terasa lagi-lagi saya gak update sekian lama. Padahal saya rasa baru beberapa hari saya tinggal blog ini tapi cek tanggalnya ternyata update terakhir lebih dari sepekan yang lalu. Ya udah, kita terusin deh sharing ilmu cara membuat themes WordPress-nya.

Kali ini kita akan mengatur tampilan konten yang sudah kita buat di pertemuan sebelumnya. Karena mengatur style, berarti file yang akan kita edit sekarang adalah file style.css. Dan karena ini pengaturan konten, maka kita tempatkan saja di bawah pengaturan untuk konten sambil sekalian menghilangkan warna kuning di bagian konten artikelnya. Yuk, kita cari kode ini:

#content {
  width:590px;
  background:#FFCC00;
  float:left;
  }

Lalu kita hilangkan kode background:#FFCC00; agar warna belakangnya tetap putih. Jika anda simpan file style.css dan lihat blog anda sekarang, maka background kuningnya akan hilang sekarang dan berganti dengan putih bersih.

Tahap awal, kita atur dulu tampilan untuk judulnya. Sebelumnya kita telah mengidentifikasi bagian judul artikel dengan <h2 class="title">. Jadi kita buat saja di style.css-nya seperti ini:

.title , .title a{
  font-size: 20px;
  text-decoration:none;
  color:#000000;
}

Satu tambahan perintah baru kita pelajari disini yaitu text-decoration:none; Perintah ini untuk menghilangkan garis bawah pada judul artikel.

Dan untuk bagian post meta yang berisi informasi tanggal publikasi, kategori, jumlah komentar serta link edit, kita buat dengan font lebih kecil dan background warna abu-abu:

#postmeta {
  font-size:10px;
  background: #EDEDED;
  padding:10px;
}

Sekarang simpan dan lihat bagaimana tampilan blog anda sekarang

Pada bagian konten ini, sebenarnya ada banyak hal yang harus kita atur, misalnya bagaimana menampilkan gambar nanti, list, link, dll. Tapi gpp, nanti kita atur lagi kalau sudah jadi. Santai saja bos .



Source: WorPress

Wordpress

Tweet