Sabtu, 25 Oktober 2008

Hanya menampilkan judul posting pada pencarian label

Arti dari judul diatas adalah, postingan yang terdapat pada label tersebut hanya menampilkan judulnya, seperti yang pernah dibahas oleh o-om. Apabila kita melakukan klik pada label, maka yang akan tampil hanya judul postingan label tersebut tidak menyertakan isi dari postingannya, contohnya klik disini...bagaimana cara membuatnya?



Kemaren-kemaren o-om menjelaskan cara hanya menampilkan judul postingan seperti ini :

Pertama :

Buka Template -> Edit HTML -> Jangan lupa lakukan backup template :) -> kemudian beri tanda cek pada 'Expand Widget Templates'



Kedua :


Lihat kode dibawah 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'/>




Kemudian cari kode warna merah diatas, jika sudah ketemu ganti kode warna merah diatas 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>



Ketiga :


Jangan lupa disimpan dan lihat hasilnya. selamat mencoba :)



Sekarang kita akan membuatnya lebih cantik menawan

1. Buka template->Edit hmtl kemudian klik expand widget template
[jangan lupa di backup dulu]

2. Cari kode dibawah 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'/>


3. Kemudian ganti kode yang berwarna merah dengan kode di bawah :

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<div style='border: 2px solid rgb(230, 230, 230); width:100%; height:20px; overflow:auto;'><a expr:href='data:post.url'>
<img alt='' border='0' id='BLOGGER_PHOTO_ID_5256418093055728178' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6d7LoZKK4ypjyYm7ddRIzIdb4HMGIErsLBlQw9mn71EuzrpO82ee3pitJuDIuYJ4g-zRx5Hr42hIh6M7n7dRqa9_hDSBQYphgQTBJz83DmPkDEQpPYAFURLoqsZdhA0Gp7cUx5nEYlA/s200/panah2.jpg' style='margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 32px; height: 20px;'/> <b><data:post.title/></b></a>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


Penjelasannya :

@ <div style='border: 2px solid rgb(230, 230, 230); width:100%; height:20px; overflow:auto;'> adalah border judul tersebut.
@ <img alt='' border='0' id='BLOGGER_PHOTO_ID_5256418093055728178' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6d7LoZKK4ypjyYm7ddRIzIdb4HMGIErsLBlQw9mn71EuzrpO82ee3pitJuDIuYJ4g-zRx5Hr42hIh6M7n7dRqa9_hDSBQYphgQTBJz83DmPkDEQpPYAFURLoqsZdhA0Gp7cUx5nEYlA/s200/panah2.jpg' style='margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 32px; height: 20px;'/> Adalah gambar pada tampilan judul potingan itu, gambar berada di sebelah kiri.
@ <b><data:post.title/></b> <b> adalah efek penebalan pada judul yang tampil, kita bisa memodifikasinya dengan judul yang berkedip, garis bawah, tulisan miring, dan coretan tengah.

cara penulisannya ganti kode ungu diatas dengan kode hijau dibawah ini :

Judul berkedip <blink><data:post.title/></blink>

Judul dengan garis bawah <u><data:post.title/></u>

Judul tulisan miring <i><data:post.title/></i>

Judul dengan coretan tengah <s><data:post.title/></s>

Pilih yang mana ya? terserah selera aja deh :)

Setelah itu simpan dan lihat hasilnya, klik salah satu label kamu...yang sudah kamu buat adalah [seperti ini].
Selamat mencoba...


Read this | Baca yang ini



Widget by [ Tips Blogger-Tutorial Blogger Pemula ]

6 comments:

Anonim mengatakan...

wih... jd rame...

Wandi Khan mengatakan...

salam kenal.... saya dah nyoba nich tutorial tapi kok gak bisa yach? masalahnya dia gak mau ngesave. tolong bantu saya yach...

Anonim mengatakan...

Kalau ga mau ngesave, itu kayanya blogger lagi eror. Bisa di coba lagi esok harinya...

ceritaku mengatakan...

cara buat menu halaman gmn ya?tlg ya mas

fehry mengatakan...

klo tanpa tanggal gimana?

Bang arie mengatakan...

@Godek : Maksudnya buat halaman gimana ya?


@fehry : Cari kode di halaman edit tempalte kamu

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
}

Kemudian sisipkan kode visibility: hidden; diantara kode di atas. Pemasanganya :

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}

lalu simpan...

Posting Komentar

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Untuk menggunakan emotion copy paste kodenya saja, budayakan berkomentar setelah membaca ya .

Note : Harap gunakan nama anda dan jangan menggunakan keyword-keyword tertentu atau komentar anda tidak akan dipublish...