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

Cara Membuat Tampilan Postingan Yang Berbeda-beda

18 Oct. 201185 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. Mempercantik Tampilan Code Snippets Dengan CSS
  2. Membuat Background Pattern Dengan CSS3 Repeat Linear Gradient
  3. Tips dan Tricks CSS (Cascading Style Sheets)
  4. Membuat Efek Text Stroke Dengan CSS
  5. CSS3, Sonic Mengejar Bola
  6. Yesterday, The Beatles
  7. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  8. Membuat Text Gradient Dengan CSS
  9. Cara Mengganti Background Theme WordPress
  10. Menggulingkan Top Komentator
  1. 27-7-2013 at 18:56 | #1

    gak paham sama sekali pak, pengen percategory buat kotak kotak, tapi dasar ilmunya belum ada


    Custom post bisa juga dibuat untuk kategori tertentu dg template khusus berdasarkan nomor ID dari sebuah kategori, sehingga nantinya setiap postingan yg dimasukkan ke dalam kategori tertentu tersebut secara otomatis tampilannya akan berbeda dg postingan lainnya (berdasarkan kategori yg lainnya)

    Reply

  2. 22-3-2014 at 15:02 | #2

    sangat menarik nih. ditunggu artikel selanjutnya

    Reply

  3. 16-4-2014 at 18:52 | #3

    wah sangat bagus halamanya

    Reply

  4. 11-5-2014 at 20:09 | #4

    lho ini tampilannya koq seperti ini ya

    Reply

  5. 31-5-2014 at 10:40 | #5

    unik sepertinya om. kreatif

    Reply

Comment pages
1 7 8 92505
4+7=? (Wajib diisi)