Cara Membuat Read More pada Blogspot

Karena saya sudah janji kepada beberapa orang agar memberi tahu cara kasih "read more" pada blogspot , maka malem ini saya mw menepati janji buat kasih tahu caranya . Sebagai sumbernya , dapat dilihat di blog mas Fahmi . cara yang Anda lihat dsini hanya adaptasi dari artikel tersebut .

Cara Pertama:

1. Buka template -> Edit HTML -> Kasih tanda tik pada menu "expand widget tempate"
2. Letakkan kode berikut persis di atasnya kode </head> :

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

3.

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

Letakkan kode diatas di bawah kode

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

4. Klik Simpan. Selesai.
5. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:

<span class="fullpost">

</span>

Jangan lupa klik SIMPAN PENGATURAN.

Cara Memposting

Ketika memposting, klik EDIT HTML (bukan COMPOSE). Maka, secara otomatis akan tampak kode

<span class="fullpost">
</span>

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry/artikel), letakkan di antara kode

<span class="fullpost">

dan

</span>

Cara Kedua:

1. Buka template –> edit HTML
2. Kasih tanda tik/cek menu “expand widget template”
3. Cari kode berikut di TEMPLATE blog Kamu:

<div class='post-header-line-1'/>
<div class='post-body'>

4. Kalau sudah ketemu, letakkan kode berikut DI BAWAH kode html di atas:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

5. Di Bawah kode di atas ada kode html sbb:

<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

6. Nah, di antara kode

<p><data:post.body/>

dan kode

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

pasang kode html ini:

<a expr:href='data:post.url'>Read More .. </a>
</b:if>

7. Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna biru adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):

<div class='post-header-line-1'/><div class='post-body'>
<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>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Klik Simpan Template. Selesai.

8. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:

<span class="fullpost">
</span>

Jangan lupa klik SIMPAN PENGATURAN.

Cara Memposting

Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode

<span class="fullpost">
</span>

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry), letakkan di antara kode

<span class="fullpost">

dan

</span>

Catatan Penting:

(A) Artikel yg diposting sebelum pemasangan kode READ MORE di atas akan tetap tampil penuh di halaman muka, Kamu bisa mengeditnya dg cara sbb:

1. Klik menu EDIT POSTS
2. Klik EDIT di artikel yg akan diedit.
3. Pasang kode

<span class="fullpost">

di bawah paragraf yg akan ditampilkan. Dan pasang kode

</span>

di akhir artikel.
Ingat hanya ada SATU kode

<span class="fullpost">

dan

</span>

Apabila terdapat lebih dari satu, dan biasanya numpuk di bagian paling bawah artikel, maka dibuang saja.

Permasalahan :

1. Saat mengklik “Simpan Perubahan” kita sering mendapat pesan demikian:

XML error message: The element type “style” must be terminated by the matching end-tag “”.

Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ‘ dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip ['] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.

2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Solusi: klik “Pengaturan” -> klik “Format” -> buang semua tanda kutip buka/tutup di “fullpost” dan ganti dengan tanda kutip yang baru. Jangan lupa klik “Simpan”.


Lebih jelas silahkan liat di sini .

UPDATE :

Ada cara yang lebih 'elegan' dalam membuat Read More . Dimana ketika kita mengklik 'Read More' , maka full post akan muncul dalam halaman utama itu sendiri . Tidak dalam Tab yang baru .

Mengenai caranya , silahkan liat di sini .