Jumat, 02 September 2011

Cara Menampilkan Hanya Judul Postingan Di Halaman Label

Ketika sobat melakukan pencarian atau membuka isi label (kategory) di blog saya pasti akan melihat hasil tampilan berupa link judul posting tanpa menampilkan isi posting sama sekali, tentu saja dengan cara ini sangat menguntungkan dan mempermudah mengunjung ketika mencari artilel/bacaan di blog kita, coba bayangkan ketika pengunjung membuka label atau kategory yang isinya ada 100 posting, tentu hal ini menjadi masalah nantinya dan membutuhkan waktu yang lama sampai halaman benar-benar terbuka sempurna, sudah pasti pengunjung akan jenuh dan meninggalkan blog sobat

Coba sobat perhatian gambar contohnya dibawah ini :
Untuk mengatasi masalah diatas ada baiknya sobat hanya menampilkan judul posting beserta posting saja, selain mempermudah, tentu saja loading page sobat akan lebih cepat dari biasanya ketika membuka halaman label (sobat bisa lihat contohnya disini)

Lansung saja sya berikan langkah-langkahnya :

1. Silahkan sobat login ke akun blogger sobat
2. Klik Lay Out atau Rancangan, kemudian sobat klik Edit HTML
3. Jangan lupa Back Up template sobat klik Download Full Template
4. Kemudian sobat klik Expand Widget Template
Pada penjelasan ini saya akan menjelaskan 2 versi yaitu tampilan label tanpa kotak dan tampilan label menggunakan kotak

1. Tampilan label tanpa kotak
Sobat perhatian kode berikut ini :

<! - Posts ->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>

<h2 class='date-header'> <data:post.dateHeader/> </ h2>
</ b: if>

<b:include data='post' name='post'/>

Catatan : Sobat cari kode yang berwarna merah tersebut dengan Ctr+F
Kemudian sobat ganti kode yang berwarna merah dengan kode dibawah ini : 

<b: if cond = 'data: blog.homepageUrl! =
data: blog.url '>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/> </ a> <br/> <br/>
<b:else/>

<b:include data='post' name='post'/>
</ b: if>
<b:else/>
<b:include data='post' name='post'/>
</ b: if>

Kemudian sobat klik Save Template

2. Tampilan label menggunakan kotak
Sobat perhatikan code dibawah ini :

<b: if cond = 'data: blog.homepageUrl! =
data: blog.url '>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>

<data:post.title/> </ a> <br/> <br/>

<b:else/>
<b:include data='post' name='post'/>
</ b: if>
<b:else/>
<b:include data='post' name='post'/>
</ b: if>

Catatan : Sobat cari code yang berwarna merah menggunakab ctr+F

Kemudian sobat ganti code yang berwarna merah dengan code berikut ini :

<div style='padding:6px 0 6px solid 5px;border-right:1px solid #ccc;border-bottom:1px #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>
<img alt = 'Arrow | Khamardos Blog' border = '0 'width = '12' height = '12 'src=' http://i655.photobucket.com/albums/uu271/spantibelspku/Panah_2_thumb.png'/ >
<data:post.title/> </ div> </ a>

Catatan : 
1. Sobat bisa ganti warna dengan warna pilihan sobat, caranya ganti code yang berwarna hijau dengan code warna sesuai pilihan sobat
2. Sobat bisa mengganti gambar kotak, caranya sobat ganti kode yang berwarna orange dengan gambar pilihan sobat

Kemudian sobat klik Save Template dan lihat hasilnya

Jika sobat berhasil silahkan tulis komentar sobat disini. Terima kasih sudah bersedia membaca.

0 komentar:

Posting Komentar