Kamis, 05 Maret 2009

Cara Membuat Read more (baca selengkapnya) pada Postingan Khususnya Blogspot

Untuk anda pengguna blogspot, berikut ini langkah modifikasi yang bisa dilakukan. Trik ini menggunakan css untuk menyembunyikan sebagian post, sehingga hanya bagian yang diinginkan saja yang tampil di halaman depan.

Pertama buka template blogger kamu, kemudian tambahkan CSS berikut, CSS biasanya terletak di antara tag <style> dan </style>
...
<MainOrArchivePage>
span.selengkapnya {display:none;}
</MainOrArchivePage>
<ItemPage>
span.selengkapnya {display:inline;}
</ItemPage>

Dengan style ini, kita membuat sebuah class di css dengan nama “selengkapnya” dan hanya akan tampil ketika postingan berdiri sendiri (post page). Sebagian dari berita akan menggunakan class ini seperti yang akan saya jelaskan kemudian.

Langkah kedua adalah menambahkan kode untuk menampilkan link “baca selengkapnya…” tambahkan kode berikut setelah kode <$BlogItemBody<$BlogItemBody$> gt; pada template kamu:


<mainorarchivepage><br/>
<a href="<$BlogItemPermalinkURL&gt" baca selengkapnya..</a>
</mainorarchivepage>

Kamu bisa mengganti tulisan “baca selengkapnya..” dengan kata lain yang kamu suka!
Setelah mengkopi kode-kode diatas kedalam template kamu, Save Template dan Republish.

Langkah terakhir adalah melakukan modifikasi setiap kali kamu membuat postingan. Ketika membuat berita yang akan dipotong, selalu gunakan mode Edit Html bukan Compose mode , dan tambahkan kode seperti contoh berikut ini:

(bagian artikel yang anda tulis taruh di sini..inget tanpa tanda kurung ya...)
<span class="selengkapnya">
(dan sebagian lagi artikel yang anda tulis taruh disini..inget tanpa tanda kurung ya...)
</span>

Maka akan menghasilkan sebuah postingan seperti ini:

(bagian artikel yang anda tulis taruh di sini..inget tanpa tanda kurung ya...)baca selengkapnya..

ketika link di klik maka akan menampilkan postingan secara penuh seperti ini:

(bagian artikel yang anda tulis taruh di sini..inget tanpa tanda kurung ya...dan sebagian lagi artikel yang anda tulis taruh disini..inget tanpa tanda kurung ya...)

Jika cara di atas tidak bisa, anda juga bisa menggunakan cara lain yang akan saya jelaskan di bawah ini sebab setiap template itu berbeda-beda code CSSnya..
inilah caranya...:
cari code script seperti di bawah,

<data:post.body/>

jika masih tidak di temukan cari code script yang kayak di bawah ini,

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

kemudian setelah anda menemukan salah satu dari code script yang barusan saya tunjukkan di atas,,,maka hapuslah code script tersebut dan gantilah dengan code script yang ada di bawah 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/>
<a expr:href='data:post.url'><strong>Read more / Selengkapnya...</strong></a></p>
</b:if>

selanjutnya adalah tahap ending, yaitu penyimpanan. caranya tekan tombol "save template/simpan templat" setelah tahap tersebut anda langsung aja masuk ke kolom posting lalu buat entry baru, Ketika membuat postingan yang akan dipotong, selalu gunakan mode Edit Html bukan Compose mode, copi code script di bawah ini

(bagian artikel yang anda tulis taruh di sini..inget tanpa tanda kurung ya...)
<blink>...</blink><span class="fullpost">

(dan sebagian lagi artikel yang anda tulis taruh disini..inget tanpa tanda kurung ya...)
</span>

selanjutnya caranya seperti cara pertama yang saya jelaskan di atas....udah deh,,,,
Selamat mencoba !

2 komentar:

dream786 8 April 2009 pukul 07.22  

gue mau mitak di ajarin ni........
kok ngak boleh mahaaaaaaaaaalllll yaaaaaaaaaa

[ Ssi Malank ] 29 April 2009 pukul 00.10  

ajarin aku donk.............

ini nama blog aku : ssi.malank@yahoo.com
www.ssimalank.blogspot.com

PLEASE !

Posting Komentar

Followers

Text

  ©Template by Dicas Blogger.