Home » CSS » Optimasi Wordpress » Cara Membuat Tampilan Postingan Yang Berbeda-beda

Cara Membuat Tampilan Postingan Yang Berbeda-beda

18 Okt. 201187 comments
Cara Membuat Tampilan Postingan Yang Berbeda-beda

Berawal dari postingan Custom CSS Per Post Tanpa Plugin yang membahas tentang cara menambahkan/ menyisipkan kode-kode CSS pada postingan tertentu, akhirnya menimbulkan keisengan dan keinginan untuk memberikan sedikit “sentuhan” dan polesan pada beberapa postingan agar tampil beda. Konsep ini mungkin mirip dengan konsep blogazine style di mana setiap postingan akan menampilkan style yang berbeda-beda seperti halnya terbitan sebuah majalah. Dari hasil iseng memberikan sedikit “sentuhan” dan polesan pada beberapa postingan agar tampil beda, ternyata ada beberapa pengunjung yang tertarik dengan konsep ini dan menanyakan cara pembuatannya. Maka pada postingan kali ini akan saya share tentang cara membuat tampilan postingan yang berbeda-bedakhususnya untuk blog wordpress. Berikut ini langkah-langkahnya :

  1. Untuk bisa membuat tampilan postingan menjadi berbeda-beda, sebelumnya anda harus membuat settingan custom css per-post di file functions.php. Bagi yang belum tahu caranya silahkan baca di postingan ini : Custom CSS Per Post Tanpa Plugin. Jika anda suka dengan pemberian efek javascript pada postingan tertentu bisa menggunakan teknik Custom Javascript Per Post.
  2. Untuk bisa membuat custom-post, unique post, blogazine style atau apalah istilahnya, yang pada intinya adalah bagaimana cara membuat tampilan yang berbeda pada postingan tertentu, anda harus benar-benar memahami dan mengenal selector, ID dan class pada kode CSS di halaman yang akan kita custom tampilannya. Untuk langkah selanjutnya [meminjam komentar Mas Iskandaria]; “tinggal mainkan properties dan value pada ke tiga poin tersebut (selector, ID dan class).” Dan jika ingin menghilangkan tampilan elemen tertentu, bisa menggunakan teknik display:none. Jika element yang akan dihilangkan cukup banyak, misalnya pada bagian header (#header), sidebar (#sidebar), navigation (#navigations) anda bisa meringkas teknik penulisan kode CSS-nya menjadi seperti ini : #header, #sidebar, #navigations {display:none}.
  3. Setelah anda memahami langkah-langkah di atas, untuk selanjutnya kopikan kode-kode CSS (selector, ID dan class) yang telah anda custom properties dan value-nya ke dalam box Custom CSS Per Post (seperti langkah No.1). Sebagai contoh misalnya jika anda ingin mengganti warna background pada theme, maka yang perlu anda masukkan di dalam box Custom CSS Per Post adalah misalnya : body{background:#333333} atau jika disertai gambar maka kodenya adalah : body{background:#4f5161 url(URL gambar anda);background-attachment:fixed;background-position:inherit}. Untuk lebih detail teknik cara mengganti background bisa dilihat di postingan ini : Cara Mengganti Background Theme WordPress.
  4. Untuk merubah layout pada theme, misalnya theme sebelumnya terdiri dari 2 kolom kemudian akan dijadikan 1 kolom, maka pada properties dari ID atau class di dalam kode CSS dari kolom yang akan disembunyikan kita berikan value ; display:none. Misalanya pada postingan Google Doodle Art Clokey’s 90th Birthday Animation, ID kolom sebelah kanan pada kode CSS bernama #sidebar. Pada ID #sidebar kita berikan value : display:none menjadi #sidebar {display none}. Supaya layout keseluruhan menjadi lebih rapi, maka anda harus memperhatikan pengaturan width, margin dan padding pada elemen yang lainnya. Misalnya pada bagian #container lebarnya saya ganti dari semula 950px menjadi 770px, pada kolom sebelah kiri yang berisi postingan (ID-nya #main) saya ganti menjadi 740px (defaultnya 619px), kemudian ukuran lebar bagian komentar (.comment .info) juga saya sesuaikan, sebelumnya 532px saya ganti menjadi 651px. Untuk pengaturan width, margin dan padding, di samping dengan ukuran pixel (px) bisa juga dengan menggunakan percent (%) supaya responsive ketika dibuka dengan ukuran layar yang berbeda-beda.

Karena ini hanya konsep untuk hasil akhirnya tergantung pada kreatifitas anda masing-masing dalam memberikan sentuhan pada tampilan yang diinginkan. Silahkan berimprovisasi dengan fitur-fitur yang ada di CSS baik CSS2 atau CSS3, kombinasi warna, efek animasi, semi transparan background dan masih banyak lagi. Atau jika masih kesulitan untuk membuat sebuah konsep atau rancangan sendiri, anda bisa menggunakan jurus ATM (Amati Tiru & Modifikasi) baik dari sebuah web/blog atau dari sebuah theme seperti style postingan ini (sekedar contoh).

Mudah-mudahan artikel tentang Cara Membuat Tampilan Postingan Yang Berbeda-beda ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Menggulingkan Top Komentator
  2. Modifikasi Tampilan Halaman Daftar Isi
  3. Mempercantik Tampilan Code Snippets Dengan CSS
  4. CSS3, Sonic Mengejar Bola
  5. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  6. Membuat Text Gradient Dengan CSS
  7. CSS Image Sprites Generator
  8. Custom CSS Per Post
  9. Cara Menggabungkan File CSS WordPress
  10. Membuat Efek Text Stroke Dengan CSS
  1. 18-10-2011 at 14:35 | #1

    Ilmu baru yang sangat berguna, makasih banyak Kang..

    Reply

  2. 18-10-2011 at 15:47 | #2

    wah,,keren om..
    tapi tar ngaruh di SERP nggak sih om.. kan templatenya berubah2 kan om.. :)

    Reply

  3. 18-10-2011 at 16:50 | #3

    Karena saya masih coba2, maka belum berani untuk menerapkan di blog utama…
    Takut kalau nggak bisa ngatasi
    Tapi saya akan belajar terus

    Reply

  4. 18-10-2011 at 23:01 | #4

    Harus berani mencoba apapun hasilnya untuk berkreasi
    trims mas atas sharenya, kapan ni bisa coba-coba ilmu barunya

    salam dari pamekasan madura

    Reply

  5. 19-10-2011 at 03:48 | #5

    Ilmu dengan cara yang patut di coba.

    Sukses selalu
    Salam
    Ejawantah’s Blog

    Reply

  6. 19-10-2011 at 12:20 | #6

    Makin tambah umur kok makin susah ya belajar script ? Hhhh…pusing..

    Reply

  7. 19-10-2011 at 21:23 | #7

    berkunjung gan,,,,
    salam kenal,,,,!

    Reply

  8. 19-10-2011 at 21:41 | #8

    Sepertinya harus paham betul dengan kode-kode ya Mas?… Masih harus belajar banyak lagi nih saya. :D

    Reply

  9. 19-10-2011 at 22:11 | #9

    Untuk blogger adha tidak?

    Reply

  10. 20-10-2011 at 02:00 | #10

    mas, klo untuk blogger bgmn mas?

    Reply

Comment pages
1 2 3 9 2505
5+8=? (Wajib diisi)