Pada wordpress kita bisa dengan mudah mengatur posting artikel apakah ditampilkan penuh atau hanya resume (paragraf awal) saja beserta link read more.. atau baca selanjutnya. Namun hal itu tidak ada pada blogger, nggak tahu kenapa.
Setelah puter2 nyari artikel tentang ini akhirnya aku dapet namun nggak puas, karena kita harus mengedit lagi artikel yang terdahulu kita untuk membuat resume. Kemudian aku mencoba coba sendiri, pertama dengan fungsi javascript.
<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Adalah boleh jika kita melakukan hal seperti berikut ini:
<div class='post-body entry-content'>
<b:if cond="'data:blog.pageType">
<p><data:post.body/></p>
<b:else>
<p>
<script>doResume("<data:post.body/>");</script>
</p>
<a expr:href='data:post.url'>Read More....</a>
</b:if>
<div style='clear: both;'/><!-- clear for photos floats -->
</div>
Kemudian pada head kita tambah fungsi doResume
<script>
function doResume(postBody){
document.write(postBody.substr(0,500)); // menampilkan 500 karakter pertama
}
</script>
Kode ini memang berjalan, jadi yang ditampilkan hanya 500 karakter pertama postingan dan muncul link read more.. tapi apa yang terjadi adalah tampilan dari blog jadi kacau! mengapa? jawabanya adalah pemotongan 500 karakter pertama dilakukan secara membabi buta bayangkan bagaimana jika yang kepotong pas sebuah tag sehingga tag akan menjadi tidak valid hingga mempengaruhi content lain. capek deh!!!
Intinya bagaimana kita bisa memparsing artikel tersebut agar bisa tampil tanpa invalid HTML, adalah susah ya itu menurutku :), Aku lebih suka menggunakan cara berikut ini, tanpa menggunakan javascript.
Caranya aku menggunakan attribut height untuk membatasi tampilan hanya bagian atas saja, ilustrasinya adalah
</p>
<div style="height:150px;overflow:hidden">
<data:post.body/>
</div>
<p>
Yang terjadi adalah artikel akan ditampilkan sesuai dengan tinggi div yaitu 100px jika artikelnya lebih panjang maka akan disembunyikan (overflow:hidden). Dan cara ini menurutku lebih baik dan aman, hehhe.
Baiklah jika Anda bingung akan saya pandu, langkahnya :
1. Login dulu ke blogger Anda dan masuk halaman admin
2. Pilih tab template dan kemudian sub tab edit HTML
3. Centang Expand Widget
4. Cari kode seperti ini :
<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
5. Jika ketemu maka Replace dengan kode berikut :
<div class='post-body entry-content'>
<b:if cond="'data:blog.pageType">
<p><data:post.body/></p>
<b:else>
<p>
<div style="height:150px;overflow:hidden">
<data:post.body/>
</div>
</p>
<a expr:href='data:post.url'>Read More....</a>
</b:if>
<div style='clear: both;'/><!-- clear for photos floats -->
</div>
6. Simpan perubahanmu, seharusnya akan sukses langkah ini.
Jika masih gagal silahkan ulangi lagi langkah ini, jangan lupa backup dulu template Anda sebelum melakukan ini. Cara ini yang saya lakukan pada blog ini, cermatilah pada blog ini!
Jika ada pertanyaan atau kritik jangan sungkan2 gunakan shoutbox biar lebih cepat, namun baiknya pakai form comment blogger atu bisa juga pakai YM kalu aku lagi OL pasti aku jawab.
Last Update : 1 Januari 2008
Karena ada kekeliruan penulisan kodenya ( overflow aku tulis overflw ) sekarang dah aku ubah makasih buat yang dah komentar, mudah2an sekarang berhasil.
- Sekarang, Anda bisa pasang iklan disini!
- Mau Tukeran Link Dengan Blog Ini? (Pengunjung Blog Ini Lebih dari 100/hari)
- Cek Jumlah Pengunjung
|