Cara Membuat Tampilan Berbeda di Setiap Postingan WordPress

Tulisan ini membahas Cara membuat tampilan berbeda di setiap postingan wordpress, dengan kita bisa membuat tampilan berbeda disetiap postingan

You do not have the right to quit trying. (The universe wobbles when you do.) You have the right to quit Toxic People. (They're contagious.). Dr. SunWolf

Tulisan ini membahas Cara membuat tampilan berbeda di setiap postingan wordpress, dengan kita bisa membuat tampilan berbeda disetiap postingan

Last Modif at July 9th, 2011

pada postingan sebelumnya ‘Cara membuat tampilan berbeda di setiap page(halaman) wordpress‘ sudah dijelaskan proses serta cara agar setiap page memiliki tampilan berbeda, pada tulisan ini kita akan sharing ‘cara membuat tampilan berbeda di setiap postingan’.

pada dasarnya prinsip kerjanya sama saja, yaitu membuat style css yang berbeda di setiap postingan itu sendiri. hanya saja, pada postingan ini, kita menyimpan style css-nya di database. untuk menulis cssnya, kita akan menggunakan custom field, bagaimana caranya?

contoh ‘pengunaan pada theme Twentyten’

  • activate themes twentyten
  • edit header.php
  • lalu tambahkan script berikut tapat diatas </head>

<!-- style untuk single -->
<?php if ( is_single() ) : // fungsi ini ialah, hanya menjalankan ini di single post
?><style type="text/css"><!--<?php
$key="style"; echo get_post_meta($post->ID, $key, true); /*fungsi ini nantinya akan menjadi css, dimana style cssnya
kita tulis bersamaan dengan ketika menulis postingan. yah, kita menggunakan custom field */
?>-->
</style>
<?php endif; ?>
<!-- // end style untuk single post -->

  • save

contoh membuat tampilan berbeda di setiap postingan

  • klik post lalu add new
  • beri judul
  • tulis postingan
  • isi except
  • scroll kebawah
  • cari ‘add new custom field’
  • klik enter new
  • pada name, isi dengan ‘style'(tanpa tanda kutip)
  • pada value, isi dengan kode(style) berikut

body{
background:black;
}
#footer, #header{
display:none;
}
#content{
background:#ccc;
color:#333;
-moz-border-radius:5px;/* lengkungan untuk firefox */
border-radius:5px;/* lengkungan untuk css3 */
padding:10px 20px;
}
#wrapper{
margin:10px auto 20px auto;
-moz-border-radius:10px;/* lengkungan untuk firefox */
border-radius:10px;/* lengkungan untuk css3 */
/* ini hanya contoh, banyak hal yg bisa sobat lakukan*/
}

  • setelah memasukan id dan value diatas
  • klik add custom field
  • kanan atas klik update
  • view post

nah, terlihat kan perubahanya? coba bandingkan dengan postingan-postingan lain.

untuk post salanjutnya silakan isi custom field, pada select pilih ‘style’ lalu valuenya isi dengan css. silakan manfaatkan tag-tag html yang sudah tersusun di themes sobat.

banyak manfaat ketika menambahan fitur ini, selain membuat tampilan berbeda disetiap post kita juga bisa memanfaatkan untuk berexperiment dengan css. contoh ‘saya menggunakan fitur ini untuk membuat icon/logo dengan css’

bagaimana cara menggunakanya untuk theme lain?

intinya letakan script php diatas ke atas </head> biasanya di header.php

lalu, buat custom field dengan name ‘style’ dan valuenya ‘kode css’!

sebenarnya pada pemberian name custom field ini bisa sesuai selerah sesuaikan saja script ini $key"style";

lebih extreme

kalau mau lebih extreme, kosongkan css untuk single post(termaksud css komentar) lalu hafalkan/lihat tag-tag html untuk single post, kemudian jika ingin publish post, silakan buat style css di setiap post. Dengan demikian semua tampilan single post akan berbeda-beda ‘dengan catatan css yang anda tulis juga beda :)’. masalahnya ialah, apakah sobat mau membuang-buang waktu hanya untuk itu?

semoga bermanfaat, jika ada yang mau ditanyakan silakan tingalkan komentar.

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

18 thoughts on “Cara Membuat Tampilan Berbeda di Setiap Postingan WordPress”

  1. arikaka says:

    saya yang standar aja deh, mau coba bingung :D

  2. Raindra says:

    Kang mau nanya kalo buat blogspot gimana,tolong dong ^:)^

    1. indam says:

      Sori bro, udah jarang main di blogspot. Tapi sepertinya udah banyak kok yang bahas

  3. Nyoman CNd says:

    Utk wordpress gratisan bsa nggk mas??

    1. indam says:

      Tidak bisa mas…

  4. thanks gan infonya, coba maen ke link saya gan saldosampingan.mprh.net

  5. Septian says:

    Gan, Kalo mau ganti icon wordpress di cpanel gmana tuh…

  6. INSPIRASIKU says:

    wah saya cari yang untuk blogspot
    tapi nice infonya

    Resolusi Juara 2012

  7. Taryono says:

    Wah mantap Gan bisa saya coba nih …..

  8. TokiMAchi says:

    wah, aku gak bisa gan

  9. Indoblogger says:

    Postingan yang menarik gan. Bisa untuk menambah wawasan.

  10. Lisa says:

    Kang, mau tanya. Gimana caranya jika melihat postingan dr tiap category sidebarnya beda beda? harus buat single baru or gimana ya? :)

  11. Kalo blog ane http://kamaltrainings.wordpress.com/ apa bisa masukin script nya gan?? :-/ :-/

  12. SIAF says:

    Jika Mau Merobah Logo dan Baigron setiap category gimana mas idam….Help me

  13. Af says:

    Aslm Jika Mau Merobah Logo dan Baigron setiap category gimana mas idam….Help me

  14. atin says:

    halo mas..mo tanya..soalnya dah gugling diinternet ga nemu-nemu..
    bisa ga ya membuat halaman postingan berbeda-beda..jadi maksud saya antara postingan yang satu dengan yang lain saling berbeda iklannya..sehingga kalau dibuat mereview produk di clickbank akan lebih maksimal lagi
    karena iklan yang dipasang di sidebar nantinya dapat disesuaikan dengan judul postingan masing-masing..

    tolong ya mas dijelasin..lagi butuh banget nih infonya..

    trims,

  15. adhe says:

    Mas, Aku lagi bikin laporan dr sekolah membuat web dengan HTML dari notepad.
    Bisa gak mas kasih tau cara membuat tema di awal profil mas itu?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-