Selamat Datang

Membuat Tampilan Postingan Berbeda-beda Pada WordPress Ala Blogazine

Membuat tampilan layout artikel atau post berbeda-beda pada wordpress seperti yang dilakukan pecinta blogazine cukup menarik untuk dicoba, walaupun tutorial-webdesign.com bukanlah penganut blogazine, tapi kali ini kita akan membahas sedikit dasar-dasar pembuatannya.

Visualisasi Layout Berbeda

Image by Pingv

Seperti anda lihat, untuk tampilan artikel yang anda baca ini berbeda dibanding dengan tampilan artikel lain di website ini.

Coba dibandingkan dengan ini: Menjadikan Video Youtube Sebagai Background Website.

Perbedaan nya yaitu:

  • Tidak ada header (logo)
  • Posisi Konten yang biasanya ada ditengah sekarang ada dikiri, sedangkan sidebar yang ada di kiri berpindah ketengah.
  • Warna menu atas berubah.
  • Warna sidebar juga berubah.

Nah bagaimana membuatnya? ada banyak cara untuk membuat seperti itu, ada yang menggunakan menggunakan plugin dan ada yang menambahkan atau membuat script sendiri.

Start

Pada kesempatan ini kita akan mencoba dengan manual, yaitu dengan menambahkan script, untuk itu anda perlu merubah sedikit file function.php yang ada di folder theme wordpress anda.

Tambahkan script berikut di wp-content/themes/nama_theme/functions.php

	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', 'CSS Untuk Post', 'custom_css_input', 'post', 'normal', 'high');
		add_meta_box('custom_css', 'CSS Untuk Page', '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();
		}
	}

Script tersebut terdiri dari 4 fungsi, dimana 3 fungsi itu akan digunakan untuk berinteraksi dengan core wordpress, fungsi tersebut yang kita deklarasikan dengan add_action.


add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');

custom_css_hookscustom_css_input : untuk mendeklarasikan dan menambahkan metabox, disini yaitu sebuah textarea dengan nama (CSS Untuk Post) yang akan muncul di setiap pembutan Post dan (CSS Untuk Post) yang akan muncul disetiap pembuatan Page.

save_custom_css: untuk aksi menyimpan hasil nya ke database.

insert_custom_css: untuk menuliskan CSS yang diinput ke header website agar tampilan bisa berubah.

Hasil

Hasilnya yaitu sebuah textarea akan muncul dibagian bawah ketika anda menulis sebuah post atau page.

Gambar Textarea

Text area “CSS untuk Post” sudah muncul

Cara Penggunaan.

Silahkan masukan script css untuk merubah website anda pada bagian CSS Untuk Post atau CSS Untuk Page, untuk merubahnya tentu anda harus mengetahui ID dan Class apa saja yang ada di template yang digunakan.

Disitu kami menghilangkan header dengan menambahkan display:none untuk header
sidebar pindah kekanan dengan merubah float menjadi float:right, sedangkan konten ditambahkan float:left.
Dan pengaturan-pengaturan lain silahkan di explorasi sendiri

Firebug

Firebug

Untuk mengetahuinya anda bisa membuka script pada template nya atau menggunakan firebug untuk mengetahui nama ID atau Class yang digunakan.

Masukan-Masukan Lain

  • untuk membuat tampilan 100% barubah dengan cara ini, dan kamu punya niat untuk benar-benar menerapkan blogazine, kamu bisa mengosongkan css untuk keperluan pengaturan artikel yang ada di style.css, dan menuliskan tampilan untuk setiap post melalui kolom css yang dibuat (Tapi ya memang memakan waktu dan tenaga).
  • Kompres css yang akan dimasukan terlebih dahulu untuk mengurangi kecepatan website.
  • Artikel yang bisa jadi referensi: The death of the boring blog post?

Semoga bermanfaat, semoga bisa menghilangkan kebosanan ketika ngeblog, salam web development Indonesia.





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

25 thoughts on “Membuat Tampilan Postingan Berbeda-beda Pada WordPress Ala Blogazine

  1. Topa Dista says:

    baru tau tekniknya stylelisnya di taro di post…. :v
    ga kpikiran sbelumnya… hahahahaha…. :v

  2. Aji Kurniawan says:

    Nah, tutorial inilah yang selama ini saya cari-cari :D

    Akhirnya dibahas juga di TWD

  3. Syauqi says:

    Hahahahahaa…siip (y)
    Emang kalau pake konsep blogazine itu menyenangkan :)

  4. Hehehehhe keren pakek ini, ane dulu langsung ane masukin di page editornya bang…. :)

  5. Dah lama kenal blogazine, tapi hingga sekarang masih belum tertarik.
    Alasannya? Sebenarnya sangat menantang untuk dicoba, tapi mungkin kesibukan lain memaksa untuk tidak jadi melakukannya.

    Dengan kata lain, waktunya bang :D

  6. Ridha says:

    Maaf lho gan, untuk tampilan desktopnya memang sip, tapi ketika aku buka pake hp, aku rasa kurang menarik. Tp sekali lg maaf.

  7. Nucame says:

    Om kenapa nggak pake opsi single page saja? Misal mau pakai yg right-sidebar pake right-single.php mau pake yg left sidebar pakai yg left-single.php,, tapi ya dr awal bikin page lebih dari satu, keuntungannya tinggal pilih saja pagenya ketika posting dan nggak usah masukin css-nya lg.

    • Masing2 punya cara, tapi kalau begitu bentuk tampilan nya jadi terbatas di page yang dibuat saja, lagian susah mengelola nya.

      Sekali lagi ini hanya contoh, dan kebetulan penerapannya di website TWD, kami tidak mau terlalu merubah tampilan :)

  8. roqim says:

    mas,caranya untuk merubah agar slide yang dulunya di kiri di pindah di kanan, dan konten/artikel yang dulunya di kanan di pindah ke sebelah kiri. saya beli tema untuk tokoonline saya mas, biar gak sama dengan bawaannya. terimakasih

  9. joni says:

    terima kasih… sangat bermanfaat

  10. jadibaru says:

    wahhh, kereennnnn tutuorrr nyaa…

  11. Endi says:

    Sebenarnya sudah mencoba blogazine dari tahun kemarin, cuman untuk wordpress, sepertinya masih kurang yang bergabung :D

    Mungkin karena ada penambahan php jadi agak sedikit mumet dibanding blogspot kali yah…

    Oh iya mas, saya lihat themenya terdiri dari 3 kolom dengan kategori ditaruh ditengah, hal ini jarang saya lihat untuk di blog-blog indonesia :D

    Boleh tahu ga mas, alasannya kenapa?
    atau cuma cocok aja ditaruh ditengah?

    Dan kolom untuk postingannya pun terkesan sempit, apa sengaja atau gimana mas?

    Makasih sebelumnya.

    • Kategori di taro di tengah cuma untuk postingan ini saja kok, karena halaman ini demo dari artikel ini, halaman lain kontennya ditengah kok.

      Kolom postingan sempit karena pertimbangannya sederhana saja, “mata orang akan capek & bingung kalo baca terlalu lebar”, bisa kehilangan fokus, makanya dibuat tidak terlalu lebar.

      • Andrew says:

        saya setuju dengan TWD Editorial. Memang kalau postingan lebar apalagi dengan artikel yang panjang kadang membuat kita jemu untuk membacanya. Tapi dengan postingan yang lebih sempit, rasanya pembaca bisa lebih fokus dan detail dalam membaca artikel..

  12. Andrew says:

    Apakah perubahan tampilan posting ini bisa mempengaruhi SEO ?

  13. salotong says:

    maf gan boleh minta contoh web yang berhasil di rubah seperti di atas, newbi masih bingung pengen mencobanya

  14. heri says:

    mas saya nyari cara buat metabox content. pada post. haduh pusing jadi blog saya tentang video. jadi box meta nya juga ada 2 yang satu buat artikel yang 1 lagi buat iframe video.

    nah di metabox video saya ingin isi otomatis jadi url nya kaya gini.
    contoh:
    http://acefile[dot]com/linknya

    trus biar jadi kaya diatas saya ingin ngasih link kode unik nya aja di belakang buat pos meta boxnya.

  15. Health Care says:

    saya masih bingung gan caranya, maklum masih baru di dunia blog. mungkin kalau ada videonya saya bisa lebih mengerti. kalau untuk merubah tampilan hompage di wordpress supaya isinya bukan post2 terbaru aja kaya gimana ya gan?

    Tolong mampir ke blog ane juga ya gan :)

  16. tri ariyanto says:

    mau nanya.theme yang di gunakan di web ini apa ya. ?

  17. Bayu says:

    Udah pada kabur yang pakek konsep ini. Tinggal beberapa orang saja yang berpegang teguh pada konsep. :v

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development