Modifikasi bagian Deskripsi Postingan | Modif theme default

NOT RECOMEND
melanjutkan postingan sebelumnya

• cara menambah pavicon | modif theme default
• menampilkan sidebar di single post| modif theme dafault
• merubah ukuran badan post dan sidebar | modif theme default
• modifikasi bagian header | modif theme default
• menambahkan menu menu pages | modif theme default
• modifikasi bagian footer | modif theme default

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.com
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 . . .