Categories
Theme WordPress

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

. 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

Hasil Akhir Styling bagian Konten
Hasil Akhir Styling bagian Konten

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 šŸ™‚

By Lutvi

Bukan Ustadz, bukan Dai apalagi Kyai. Juga bukan guru. Hanya sekedar santri miskin ilmu yang coba mengamalkan 1 ayat warisan dari para ulama. Saat ini diamanahi menjadi admin web WordPress Indonesia

40 replies on “Styling Konten WordPress”

Mas ijin nanya..
gimana caranya kita nampilin option tambahan di editor wordpress..trik2 custom field yang saya tau hanya bisa muncul kalau saya masukan nama & valuenya saja, nah yg saya mau option itu akan statis nanti tinggl dipilih2 saja….misalkan kyk checkbox atau drpdown menu

Bentar, theme-nya pakai theme yang diajarin disini atau theme lain? Kalau lain kemungkinan kelirunya makin besar šŸ™‚

Dan harus diingat, kalau muncul tanda garisnya berarti text-decoration-nya memang nggak ada. Karena garis bawah itu default. Jadi kalau anda asal ada tulisan text-decoration anda ganti none ya belum tentu kena yang dimaksud.

Atau coba aja pasang kode ini di bagian paling bawah style.css:

a { text-decoration:none; }

Mudah-mudahan bisa

Artikelnya bagus2 di web ini… Saya banyak memperoleh pengetahuan seputar wordpress, dll. Semangat terus mas buat bagi2 artikel.. hehehe. Jgn lupa kunjungi website saya juga ya? šŸ™‚

Mas, saya menggunakan theme twentyten.
Pada theme ini, font size untuk tag h2 pada content koq lebih besar daripada h1. Font h1 15 px, sedang h2 18 px.
Nah, gimana ya cara mengubah font size tag h2 itu? Terima kasih sebelumnya. šŸ™‚

Mas mo tanya:

1. Cara mengganti hari/bulan ke bahasa Indonesia di ‘postmeta’ gimana?
2. Cara memunculkan ‘postmeta’ hanya setelah meng-klik ‘Baca selengkapnya’ gimana? Jika tulisan ‘Baca selengkapnya’ tidak diklik, bagian ‘postmeta’nya jadi tidak terlihat itu gimana ya Mas?

syukron katsiran, jazakumullah,,,

fiuhhh…saya pernah ikutin artikelnya setahun yang lalu, hehehe..sekarang pas mw rombak theme wp, jd inget sama artikel ini. akhirnya sudah update lagi, thax mas..

Parse error: syntax error, unexpected ‘Ƃ Ƃ wp_register_sidebar_widget’ (T_STRING) in C:\xampp\htdocs\wordpress\wp-content\themes\my-theme\functions.php on line 3

ada eror di line 3, itu isi dari file functions ane copas dari kode di atas, coba di cek lagi gan .

sangat membantu sekali mas artikelnya kami sbg pemula dalam belajar wordpress, bagaimana cara memperkecil halaman posting, agar tampilan blog tidak terlalu lebar, terimakasih

gan, klo file index ny ane buka biasa aja ada tampilannya, tapi kenapa klo ane jadiin template buat wordpress localhost ane gk muncul apa2 sma sekali, bahkan ane ctrl+u gk ada script yg tampil,.

tolong solving ny y gan, thx šŸ™‚

Luar biasa… ini saya ikutin dari awal… Terimakasih Ilmunya yaaaaaaaaa Masya Allah šŸ™‚ mudah2an Ente mendapat pahala yang berlipat ganda amieeeeeeeeeeeeeeeen šŸ™‚

Bagaimana cara menghapus tulisan PAGE 1,2 dan kata EDIT di bagian bawah konten landing page di template bawaan Cafe Bisnis, Twentyten-squeese

I simply want to mention I am just newbie to blogging and actually savored you’re web-site. Very likely Iā€™m planning to bookmark your blog post . You really come with beneficial well written articles. Bless you for revealing your webpage.

An outstanding share! I have just forwarded this onto a co-worker who had been conducting a little homework on this. And he in fact bought me lunch simply because I found it for him… lol. So allow me to reword this…. Thank YOU for the meal!! But yeah, thanx for spending the time to talk about this topic here on your blog.

Thanks a bunch for sharing this with all folks you really understand what you’re talking about! Bookmarked. Please additionally consult with my site =). We could have a hyperlink alternate agreement between us!

I do not even know how I ended up here, but I thought this post was great. I don’t know who you are but certainly you are going to a famous blogger if you aren’t already šŸ˜‰ Cheers!

I am not sure where you’re getting your info, but good topic. I needs to spend some time learning more or understanding more. Thanks for wonderful info I was looking for this info for my mission.

Comments are closed.