Modifikasi bagian Deskripsi Postingan | Modif theme default

terkadang di bagian akhir postingan terdapat deskripsi misalnya jumlah komentar kategori author dll kali ini kita akan memodifikasinya

Saya tidak mengetahui kunci menuju kesuksesan, tetapi kunci menuju kegagalan adalah berusaha untuk menyenangkan semua orang. Natalie Portman

terkadang di bagian akhir postingan terdapat deskripsi misalnya jumlah komentar kategori author dll kali ini kita akan memodifikasinya

Last Modif at July 8th, 2011

NOT RECOMEND
melanjutkan postingan sebelumnya

di blogspot maupun blog lainnya terkadang di bagian akhir postingan terdapat deskripsi, misalnya jumlah komentar, kategori, publish by: dan lain-lain tergantung sang designer. nah, di theme default ini, sebenarnya deskripsi post itu sudah ada, namun tampilannya, kurang keren. coba perhatikan di akhir postingan (menggunakan theme default)

sekarang saya bertanya, apakah sahabat suka dengan tampilannya(jika suka, yo wes stop). nah bagi yang ingin memodif berikut caranya,{tutorial berikut hanya untuk di bagian single post, sedangkan untuk bagian home dan pages tidak berubah “kedepanya akan kita share sama-sama” :)

berikut ada dua pilihan, yang pertama tidak memakai gambar, sedangkan yang kedua memakai gambar(pilih salah satu)

cara pertama, modifikasi bagian deskripsi postingan tanpa gambar

  • masuk ke directory(folder) theme default, . . .wp-content/themes/default
  • edit style.css
  • kemudian masukan style berikut

/* start deskripsi tambahan bawah post*/
.style-des-bawah-post{/*ini adalah style untuk deskrisi bwah postingan*/
background:#66ffff;/*warna latar belakang #silakan ganti dengan warn lain*/
text-align:center;/* text align center ini maksudnya, textnya di tengah*/
margin:10px auto;/*pembarian jarak luar, 10px untuk atas dan bwah, kiri kanan menyesuaikan*/
border:4px double #f6f6f6;/* tebal garis pinggir 4px, bentuk bordernya double warnanya, #f6f6f6, silakan gannti dengan warna lain*/
font-size:12px;/* ukran font*/
color:#666;/*warna text*/
padding:5px 0;/*jarak dalam, 5px unruk atas dan bwah, opx untuk kiri dan kanan*/
clear:both;/**/
width:100%;/* sesuaikan lebarnya */
-moz-border-radius:10px;
}
/* salam,
www.indaam.net
end deskripsi tambahan bawah post*/

  • simpan/save
  • edit single.php
  • cari markup seperti ini

<p class="postmetadata alt">
<small>

  • kemudian ubah menjadi sperti ini

<!--<p class="postmetadata alt">
<small>

  • scroll kebawah
  • temukan markup seprti ini

</small>
</p>

  • setelah ketemu, ubah menjadi sperti ini

</small>
</p>-->

  • yang kita tambahkan adalah komentar html, fungsinya agar mrkup awal tadi ngga aktif atau ditampilkan
  • setelah itu tambahkan markup/script berikut tepat di bawah </p>–>

<?php //script ini tidak bergambar
// start dari sini ditambahkan
?>
<div class="style-des-bawah-post"><?php edit_post_link('Edit','',' | '); ?>
date publish <?php the_time('F jS, Y') ?> |
publish by; <?php the_author() ?> |
category <?php the_category(', ') ?> |
comments <?php comments_popup_link('No Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?>|
feeds comment <?php post_comments_feed_link('RSS 2.0'); ?>
</div>
<?php //sampai disini tidak bergambar
//end ditambahkan
?>

  • save/simpan
  • buka browser sobat, trus activate theme yang sudah di modif tadi!
  • untuk merubah tampilanya, buka kembali style.css
  • cari /* start deskripsi tambahan bawah post*/
  • lalu edit, sesuai komentar yang saya tambahkan!
  • setelah di edit, jangan lupa save
  • lihat blog/single!

cara kedua, modifikasi bagian deskripsi postingan dengan gambar

di cara yang kedua ini, kita akan menambahkan atau menggunakan gambar. otomatis sobat memerlukan beberapa gambar, untuk mempersingkat waktu download(save image as) beberapa gambar dibawah! kalau sudah paham, nantinya sobat bisa menggunakan gambar sendiri




  • download kelima gambar diatas
  • masuk ke directory(foolder) theme default, . . .wp-content/themes/default
  • copy kelima gambar tadi
  • jangan ubah gambar sedikitpun
  • kemudian paste/masukan kedalam folder/directory images(. . .wp-content/themes/default/images)
  • lalu buka/edit single.php
  • cari markup seperti ini

</small>
</p>-->

  • kemudian ubah menjadi sperti ini

</small>
</p>-->
<?php //yang ini bergambar
// start dari sini ditambahkan untuk bawah post, bergmbar
?>
<div class="style-des-bawah-post"><?php edit_post_link('Edit','',' | '); ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/gambar-waktu.gif"/> <?php the_time('F jS, Y') ?> |
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/gambar-autor.gif"/> <?php the_author() ?> |
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/gambar-kategory.gif"/> <?php the_category(', ') ?> |
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/gambar-comments.gif"/> <?php comments_popup_link('No Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?>|
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/gambar-rss.gif"/> <?php post_comments_feed_link('RSS 2.0'); ?>
</div>
<?php //sampai disini bergambar
//end ditambahkan bergambar
?>

  • save/simpan
  • buka browser sobat, trus activate theme yang sudah di modif tadi!
  • lihat single blog sobat!
  • dibagian bawah postingan sobat ada dua deskripsi!
  • untuk menghapus salah satunya, buka/edit kembali single.php
  • kemudian baca komentar yang saya tambahkan!
  • sedangkan untuk merubah tampilan, pada edit style.css yang telah ditambahkan tadi

semoga bermanfaat, berambung . . .

Indam

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

2 thoughts on “Modifikasi bagian Deskripsi Postingan | Modif theme default”

  1. mas doyok says:

    kang menrut saya blognya telalu ram
    saya pusing bacanya

    salam blogger…

  2. Bradyn says:

    Magnificent beat ! I wish to apprentice at the same time as you amend your website, how could i subscribe for a blog web site?
    The account helped me a acceptable deal. I have been tiny bit acquainted of this your broadcast
    provided vivid clear concept

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

+
-