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. Main Remi Bersama Top Komentator
  2. Border Style, Border Width, Border Color
  3. Free CSS Button Generator
  4. Membuat Text Gradient Dengan CSS
  5. CSS3, Sonic Mengejar Bola
  6. CSS3 Animation, Zoom In Zoom Out, Rotation
  7. CSS3 Linear Gradient, Fitur Baru Opera 11.11
  8. Membuat Efek Text Stroke Dengan CSS
  9. Yesterday, The Beatles
  10. Cara Mencegah Copy Paste Dengan CSS
  1. 6-11-2010 at 21:54 | #1

    Saya sudah pernah nyoba kedua cara tersebut Mas…
    Kebetulan saya ada blog yg khusus saya pakai uji coba.
    Tapi untuk blog utama, saya malah nggak pakai.

    Untuk yang suka eksperimen memang sebaiknya menyediakan blog tersendiri demi keamanan dan kenyamanan, kecuali kalau kita rajin backup.
    Makasih tutorialnya
    Salam.

    Reply

  2. 6-11-2010 at 22:54 | #2

    Saya belum berani nyoba Kang..
    Harus belajar lebih banyak dulu.

    Reply

    Bang Iwan Reply:

    Makasih banyak kang…
    Harus buat blog eksperimen juga.

    Reply

    citromduro Reply:

    sama juga saya belum mencoba

    Reply

  3. 6-11-2010 at 23:31 | #3

    waduh…
    saya belum ngerti yang ginian mas…
    baca2 dulu ya

    Reply

  4. 7-11-2010 at 08:19 | #4

    Mohon Ijin belajar lagi bung alwi…

    Reply

  5. 7-11-2010 at 08:21 | #5

    eh….kecantol si aki lagi ya bung alwi ?

    Reply

    tomi Reply:

    hybrid cars kalau koment di blog sya kok sll kecantol pak akismet yaa…

    Reply

    Hybrid car Reply:

    Apa iya to ? sentimen banget si aki sama saya….

    Reply

  6. 7-11-2010 at 14:14 | #6

    code css kalau untuk blog biasanya keliatannya internal smua mas.. kecuali kalau blog design/situs photo.. biasanya external :D

    Reply

    Alwi Reply:

    Untuk WordPress menggunakan External CSS penulisannya di header seperti ini :

    <link rel="stylesheet" href="http://domain.com/wp-content/themes/nama_theme/style.css" type="text/css"media="screen" />

    atau seperti ini :

    <style type="text/css" media="screen">@import url( <?php bloginfo('stylesheet_url'); ?> );</style>

    file css ditempatkan terpisah dg HTML

    Untuk blogspot menggunakan Internal CSS seperti ini :
    <style type="text/css">Kode CSS di tulis langsung disini</style> di area tag head HTML atau sebelum kode </head>

    file CSS menyatu dengan file HTML tapi ditempatkan sebelum </head>

    Reply

    Hybrid car Reply:

    Angkatan jamannya DOS, jadinya agak “kepontal-pontal” belajarnya…. :D

    Reply

    Vulkanis Reply:

    Wah..ini dia luar biasa

    Reply

  7. 7-11-2010 at 14:15 | #7

    kunjungan perdana di blog kang alwi…

    Reply

  8. 7-11-2010 at 21:15 | #8

    Kode buat WP ya? Betapa mengerikannya hehe.

    Saya masih asik customizable di blogspot, tapi ngga menutup kemungkinan akan ikutan ke WP juga. Semoga kenyataan dalam waktu dekat :)

    Salam pak Alwi :)

    Reply

  9. 8-11-2010 at 04:44 | #9

    jos gan makasih penerangnya sangat bermanfaat nie…sekali lagi terima kasih ya. :D

    Reply

  10. 8-11-2010 at 07:53 | #10

    Do you people have a facebook fan page? I looked for one on twitter but could not discover one, I would really like to become a fan!

    Reply

Comment pages
3+3=? (Wajib diisi)