Hasil Akhir Styling bagian Konten

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

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

Dicari dengan kata kunci:

konten wordpress,cara merubah warna tulisan menu pada wordpress,cara mengubah warna menu di worpress,custom template wordpress,merubah warna template wordpress,merubah warna link pada wordpress,utak atik css menu theme twenty twelve,cara menambahkan konten pada wordpress,cara merubah warna text di template wordprees,cara membuat konten pada wordpress

40 thoughts on “Styling Konten WordPress

  1. Jorbin

    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

  2. nophie

    sangat membantu sekali tulisan2nya.
    oh iya mas, untuk ngubah tampilan konten menjadi thumbnail di homepage gmn ya kodenya??

      1. Harga Jual Blackberry iPhone Laptop Murah

        makanya saya coba semua kalimat “text decoretion” saya ubah nilainya menjadi “none” tetap ga ada perubahan. ntah kenapa, padahal sudah saya coba searching di google ke tutorial lainnya, dan ternyata semuanya mengatakan cara yg sama…. bingung dech šŸ™

        1. admin Post author

          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

  3. dhiera

    Coba , di check tag nya gan mungkin salah di tagnya …
    do check lagi gan .
    setau saya semua live text , tu bisa di ilangin gan .
    šŸ˜‰

  4. Suwardi

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

  5. Roi Lukman Saputra

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

  6. Zaki

    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,,,

  7. rijal

    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..

  8. gita

    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 .

  9. muzakkir

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

  10. Ahmad Ali Abdilah

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

  11. Ali

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

  12. falah

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

  13. read this article

    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.

  14. Antoine Kirbie

    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.

  15. Ward Napier

    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!

  16. Jeri Lanzillo

    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!

  17. Marge Marvier

    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.