Kamis, 12 November 2009

Membuat Read More pada halaman utama

Read More digunakan untuk memperpendek atau mempersingkat tulisan pada halaman utama. Apakah ini penting..??? Sangat penting....kenapa...??? Karena setiap postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More atau Baca Selengkapnyam maka akan mempercantik tampilan halaman utama. Ilustrasinya lihat gambar di bawah ini :

Yang lingkaran biru adalah alamat halaman utama kita....sementara lingkaran putih adalah tulisan "Read More" yang bila diklik akan membuka halaman penuh. Jadi udah ngerti kan apa gunanya read more...??? Nah...untuk membuat Read More ini sangat gampang...untuk membuatnya ikutilah langkah-langkah berikut ini :
Buka menu Layout kemudian pilih Edit HTML.
Kasih tanda cek (centang) pada cek box "expand widget template"
Cari kode
<data:post.body/>
di Template blog kamu ( lihat gambar di bawah ini )
Untuk mempercepat pencarian gunakanlah CTRL + F di keyboard kemudian klik Next...

Kalau sudah ketemu, Ganti kode kode tersebut dengan kode dibawah ini:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>
Tulisan "Read More....." itu bisa kamu rubah, misalnya menjadi "Baca Selengkapnya".
Simpan hasil pengeditan. Apa sudah selesai..??? Belum.!!!

Kemudian kita masuk ke Pengaturan >>> Format >>> tarik scrool halaman ke bawah sampai pada tulisan "Templat Entri" yg ada kotaknya, masukkan tulisan ini
<span class="fullpost">


</span>

kedalamnya....kemudian simpan. (lihat gambar di bawah)

Apa sudah selesai..??? Sudah.!!!
Tapi lihat dulu penjelasan di bawah ini : lihat gambar di bawah ini :

Setiap akan menulis artikel baru kamu harus menyertakan kode ini :
<span class="fullpost">


</span>
Lihat gambar di atas....Tanda panah warna biru adalah tulisan yg tampil di halaman utama....dan tanda panah warna merah adalah tulisan yg akan tampil bila di klik "Read More"nya.
Atau bila kamu malas repot2 seperti ini...kamu bisa menggunakan Read More Otomatis.

1 komentar:

kAmU bisa gunakan <a href="#">#</a> <b>#</b> <i>#</i> di kotak komentar...
Percaya gak, kalau Blog ini bisa dapat PR 10 dari mbah google...??? hehehe....