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

Cara Membuat Tampilan Postingan Yang Berbeda-beda

18 Oct. 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. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  2. Cara Mencegah Copy Paste Dengan CSS
  3. Cara Mengganti Background Theme WordPress
  4. CSS3, Sonic Mengejar Bola
  5. Border Style, Border Width, Border Color
  6. CSS3 Animation, Zoom In Zoom Out, Rotation
  7. Yesterday, The Beatles
  8. Membuat Menu Navigasi Dengan CSS3
  9. Source Code Main Remi Bersama Top Komentator
  10. CSS Image Sprites Generator
  1. 28-7-2012 at 16:32 | #1

    infonya bagus baget gan thx baget ya

    Reply

  2. 7-8-2012 at 11:54 | #2

    ijin praktek ahh… biar keliatan lebih gaul dikit.. hihii.

    Reply

  3. 10-8-2012 at 01:43 | #3

    klau untuk blogger gmn mas?

    Reply

  4. 31-8-2012 at 16:17 | #4

    boleh di coba neh kyknya bagus, hasilnya kyk apa ya….

    Reply

  5. Dwayne Matthew
    8-10-2012 at 01:18 | #5

    Bro, tutorial tampilan comment ada ga? thx before

    Reply

  6. aidhil steady
    24-10-2012 at 08:53 | #6

    oke bray, boleh dicoba nih kayaknya bagus (з´⌣`ε) hehe

    Reply

  7. 15-12-2012 at 20:57 | #7

    Mangstab infonya, jempolan deh pokoknya

    Reply

  8. 14-1-2013 at 19:24 | #8

    Gan berkunjung ke blog saya
    http://palsunih.blogspot.com/

    Reply

  9. 1-6-2013 at 04:05 | #9

    keren nih bg , ijin coba yah.. hehehe
    optimasi wordpress di blog ini semua nya udah langganan saya ini . hehe :)

    Reply

  10. 1-6-2013 at 22:46 | #10

    waduh mantab ini brur… bookmark dulu aahh….

    Reply

Comment pages
1 6 7 8 9 2505
0+9=? (Wajib diisi)