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. Membuat Efek Text Stroke Dengan CSS
  2. Mempercantik Tampilan Code Snippets Dengan CSS
  3. Border Style, Border Width, Border Color
  4. Free CSS Button Generator
  5. Bypass Template Path dan Stylesheet Path
  6. Membuat Text Gradient Dengan CSS
  7. Cara Mengganti Font Dalam Postingan
  8. Cara Mencegah Copy Paste Dengan CSS
  9. Main Remi Bersama Top Komentator
  10. Cara Menggunakan File CSS Yang Berbeda Untuk Home, Single Dll
  1. 18-1-2012 at 06:57 | #1

    wih keren…thanks infonya…

    Reply

  2. 26-1-2012 at 13:43 | #2

    kode ccs-nya dimana bozzz

    Reply

  3. 1-2-2012 at 01:43 | #3

    terimaksih sob ilmunya, ane semakin mengerti ttg blogazine nih..
    Happy blogging..

    Reply

  4. 11-2-2012 at 17:27 | #4

    waduh template ini rasanya pernah liat di blog luar awkwk makasih om alwi kebetulan saya mau belajar wp buat ekspansi blogazine saya

    Reply

  5. 13-2-2012 at 20:53 | #5

    thank ya sob dah share, silaturahmi sob

    Reply

  6. 14-2-2012 at 00:32 | #6

    konsep blogazine makin bnyk digemari aja .mantabbb :)

    Reply

  7. 17-2-2012 at 04:07 | #7

    makasih infonya bang. salam blogging bang

    Reply

  8. 3-3-2012 at 15:59 | #8

    Wah…wah…wah…

    Jadi semakin tertarik saya nih untuk membuat blogazine. Berarti intinya cuman utak-atik CSS aja toh :D

    Reply

  9. 24-3-2012 at 18:26 | #9

    keren om,,makasih toturnya..

    Reply

  10. 30-3-2012 at 05:45 | #10

    saya pke blogcepot kira2 sma g ya tehniknya, pgn nyoba :)

    Reply

Comment pages
1+6=? (Wajib diisi)