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

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

Related Post