Home » CSS » Custom CSS Per Post

Custom CSS Per Post

6 Nov. 201043 comments
Custom CSS Per Post

CSS Per Post adalah semacam teknik atau cara menempatkan atau menambahkan file CSS dalam suatu postingan tertentu untuk mendukung suatu tampilan yang diinginkan, seperti menampilkan hasil tutorial CSS, demo CSS3 dan lain-lain, bahkan kita bisa membuat tampilan yang berbeda untuk setiap postingan, seperti pengaturan tampilan header, background, footer dan lain-lain.

CSS per post ini bisa juga digunakan untuk konsep blogazine dalam bentuk yang sederhana terutama pada template satu kolom. Untuk tampilan konsep blogazine yang lebih radikal anda bisa menggabungkannnya dengan tampilan layout (menggunakan template) yang berbeda-beda untuk tiap postingannya atau bisa digunakan pada halaman tertentu dan atau kategori tertentu (membuat tampilan postingan yang berbeda untuk kategori tertentu).

File CSS per post ini ditempatkan secara terpisah dengan file css default, dan hanya akan muncul pada postingan tertentu yang telah disetting atau ditambahkan sebelumnya. Cara penempatannya bisa secara External (file CSS ditempatkan terpisah atau di luar file HTML), cara ini pernah dibahas oleh Kang Hari Mulya di postingan ini CSS Per Post, bisa secara Internal (Kode CSS dipasang di dalam tag head HTML) dan Inline (kode CSS langsung dipasang di tag HTML) cara ini tidak disarankan apalagi jika HTML doctype declaration yang digunakan adalah Strict, untuk yang Transitional mungkin masih bisa ditoleransi.

Di postingan ini saya ingin share tentang CSS Per Post dengan cara Internal, kode CSS nantinya akan ditempatkan di dalam tag head HTML secara automatis pada postingan tertentu.  Caranya tambahkan kode berikut di file functions.php :

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}

Dengan penambahan fungsi tersebut nantinya akan menghasilkan sebuah box berupa text area di bawah text area postingan. Ketika akan menambahkan fungsi css secara khusus tinggal masukkan kode css tersebut ke dalam box tersebut. Karena menggunakan cara Internal jangan lupa untuk dikompress terlebih dahulu supaya ukuran file html postingan secara keseluruhan tetap kecil ukurannya.

Custom CSS Per Post

External CSS atau Internal?

Di atas sudah saya singgung cara penempatan code css per post bisa secara External atau Internal, jika muncul pertanyaan, mau pilih cara yang mana? Jika code css-nya sangat banyak (ukuran file cukup besar) akan lebih baik menggunakan cara yang External supaya file HTML tidak membengkak ukurannya tapi akan menambah jumlah HTTP request, namun jika code CSS tidak terlalu banyak akan lebih baik jika menggunakan cara yang Internal (tidak akan menambah jumlah HTTP request) hanya akan menambah sedikit ukuran file HTML dalam postingan tersebut (CMIIW= Correct Me If I’m Wrong).

Referensi :
http://snipplr.com/view/26040/custom-css-per-page-and-post-for-wordpress/
http://digwp.com/2010/02/custom-css-per-post/

Mudah-mudahan artikel tentang Custom CSS Per Post ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Menggabungkan File CSS WordPress
  2. Free CSS Button Generator
  3. Source Code Main Remi Bersama Top Komentator
  4. Cara Mencegah Copy Paste Dengan CSS
  5. Membuat Text Gradient Dengan CSS
  6. CSS3, Sonic Mengejar Bola
  7. Main Remi Bersama Top Komentator
  8. Customisasi Tampilan Tag Cloud
  9. Mempercantik Tampilan Code Snippets Dengan CSS
  10. 80 Inspirasi, Design Footer Nan Cantik Dan Unik
  1. 9-6-2011 at 17:13 | #1

    mau tanya bro..
    tu nanti bs buat lemot waktu load halaman nggak?

    Reply

    Alwi Reply:

    berdasarkan pengalaman tidak begitu memberatkan loading, tapi jangan lupa dikompress dulu kode cssnya

    Reply

    Dangstars Reply:

    Kompressnya dengan air es atau panas wakakakkk,,emangnya demam

    Reply

  2. 7-8-2011 at 20:14 | #2

    mw tanya mas… dari phpnya : bagian mana dari fungsi php yang membentuk box editor.. saya pengguna textpattern saya cuma melakukan 2 hack namun css di set pada template namun untuk membuat box editor pada area postingan saya ingin tw dan olah sedikit bagian mana dari fungsi php tadi yang berfungsi meletakkan editor css pada area postingan

    saya kurang paham bahasa php cuma maaf bukan menguji2…klo untuk share itu cukup dengan menempelkan saja tanpa penjelasan detail :D tapi untuk tutorial saya harap detail
    _____________________________________
    Fungsi php yg membentuk box editor di bagian admin/dashboard ada di bagian ini :

    add_action('admin_menu', 'custom_css_hooks');
    function custom_css_hooks() {
    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
    }

    function custom_css_input() {global $post;echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';}

    itu sekaligus untuk 2 fungsi yakni untuk menambahkan box editor pada post dan halaman, untuk lebar dan tinggi box bisa diatur sendiri di bagian rows, cols, dan width, saya yakin anda mungkin lebih mahir

    Reply

  3. 7-8-2011 at 20:22 | #3

    mw tanya mas… dari phpnya : bagian mana dari fungsi php yang membentuk box editor.. saya pengguna textpattern saya cuma melakukan 2 hack namun css di set pada template namun untuk membuat box editor pada area postingan saya ingin tw dan olah sedikit bagian mana dari fungsi php tadi yang berfungsi meletakkan editor css pada area postingan

    saya kurang paham bahasa php

    Reply

  4. 4-11-2011 at 12:30 | #4

    Makasih gan tutornya…saya lagi belajar wordpress ,artikel ini uda saya coba di localhost dan ternyata berhasil ,tapi karena masih awam dengan css jadi masih bingung manfaatnya…oiya salam kenal gan..semoga sukses selalu bersamamu

    Reply

  5. Galih
    18-4-2012 at 22:48 | #5

    Keren mas, bisa nambah box editor di bawah postingan.
    kapan-kapan buat tutorial tentang nambah box tapi bukan buat css dong mas, tapi buat source/sumber artikel. jadi ntar ada url dan title dari sumber artikel. ya fungsinya biar gampang aja untuk nyebutin sumber artikel kalau misal mau copas. terus ntar munculnya di deretan tag dan category di setiap postingan.

    Reply

  6. Gararpas
    4-7-2012 at 10:19 | #6

    ini buat WP atau blogger mas?

    Reply

  7. 25-1-2013 at 13:17 | #7

    lw buat blogger bisa ga..??
    saya pingin coba nih…

    Reply

  8. 7-4-2014 at 12:31 | #8

    wah sanat menarik nih,

    Reply

  9. 16-4-2014 at 19:01 | #9

    keren baget semoga usaha anda semakin maju

    Reply

  10. 6-2-2016 at 23:56 | #10

    Maaf mas,.. saya mau minta bantuannya,… saya pengen merubah warna bg widget sidebar gimana ya ??? muter-muter kok gk nemu ya,.. khsus wp mas,.. makasih sebelumnya

    Reply

Comment pages
1 2 32103
1+6=? (Wajib diisi)