Membuat ReadMore di BlogSpot

Readmore/baca selanjutnya adalah sebuah trik untuk meminimalis posting kita bi blogspot, trik ini sangat berguna muntuk menampilkan sebagian dari keseluruhan isi posting kita. Dengan adanya Readmore maka postingan kita yang lain akan lebih gampang terlihat oleh user yang sedang melihat blog kita.

untuk itu kali ini saya akan berbagi ilmu, tutorial atau cara membuat readmore di blogger/blogspot ada dua cara:
cara pertama:

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

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

<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

3. Carilah kode di bawah ini

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

atau lebih gampang untuk mencari kode tersebut tekan Crtl+F, masukan kode diatas maka secara otomastis pencari kode akan menunjukkan tempat kode tersebut. bila sudah di temukan copy paste kode di bawah ini,tepat di bawah kode diatas

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

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

<span class="e;fullpost"e;>

</span>

Jangan lupa klik"e; SIMPAN PENGATURAN."e;

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

<span class="e;fullpost"e;>

</span>

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

<span class="e;fullpost"e;>
dan kode
</span>
Masalah yang Sering Dihadapi
1. Saat mengklik "e;Simpan Perubahan"e; 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? Dan tulisan ‘read more’
nongol di bagian bawah artikel? Tenang. Ikuti solusi berikut: klik
“Pengaturan” -> klik “Format” -> buang/delete semua tanda kutip
buka/tutup (quote/unquote) di “fullpost” dan ganti dengan tanda kutip
yang baru. Jangan lupa klik “Simpan”.

Selesai. Selamat ngeblog di blogger / blogspot dengan READ MORE.
Apabila Anda berhasil melakukan cara bikin READ MORE di atas tak
perlu lagi mencoba cara di bawah. Cara di bawah cuma sebagai alternatif
dan agak lebih rumit di banding cara yang di atas.
Cara Kedua:
1. Buka template –> edit HTML

2. Kasih tanda tik/cek menu “expand widget template”


3. Cari kode berikut di TEMPLATE blog Anda:

<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 == "e;item"e;'>
<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/></p>
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 == "e;item"e;'>

<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="e;fullpost"e;>

</span>
Jangan lupa klik SIMPAN PENGATURAN.
Cara Memposting
Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode

<span class="e;fullpost"e;>
</span>
Letakkan posting yg akan ditampilkan di halaman muka di atas kode
sementara sisanya (yakni keseluruhan entry), letakkan di antara kode

<span class="e;fullpost"e;>
dan

</span>
Catatan Penting:
(A) Artikel yg diposting sebelum pemasangan kode READ MORE di atas
akan tetap tampil penuh di halaman muka, Anda bisa mengeditnya dg cara
sbb:
1. Klik menu EDIT POSTS

2. Klik EDIT di artikel yg akan diedit.

3. Pasang kode
<span class="e;fullpost"e;>
di bawah paragraf yg akan ditampilkan. Dan pasang kode

</span>
di akhir artikel.
Ingat hanya ada SATU kode
<span class="e;fullpost"e;>
dan
</span>
. Apabila terdapat lebih dari satu, dan biasanya numpuk di bagian paling bawah artikel, maka dibuang saja.
Masalah yang Sering Dihadapi
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”.


Sumber : yogiezcom.co.cc