Membuat Read More

Membuat readmore atau menyingkat tulisan di blog, maksudnya memberikan tanda “Read More…” Atau “Baca Selengkapnya…” atau cukup “Selengkapnya…” di bawah tulisan kita yang dipersingkat. Agar tulisan yang panjang tidak seluruhnya tampil biar tidak memakan tempat.

To the point saja, di bawah ini merupakan langkah-langkah cara menyingkat tulisan atau memasang readmore di Blogger baru (layout template):

• Klik layout -> template -> edit HTML. Lalu beri tanda ceklis pada “Expand Widget Templates”.
• Karena masing-masing struktur template berbeda maka pada kotak Edit Template cari salah satu kode berikut:

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

Untuk mencari kode tersebut, jika Anda menggunakan browser firefox cara mencarinya cukup mudah tinggal copy salah satu kode yang akan dicari tersebut, tekan CTRL + F di tempat pencarian (di edit html blog Anda) lalu paste kode yang akan dicari di area Find: yang akan muncul setelah menekan CTRL + F dan otomatis kode yang Anda cari jika sesuai akan langsung ditemukan. Jika belum menggunakan firefox silahkan download dulu disini.

• Kalau sudah ketemu; Tahap pertama (ada dua tahap) kita copy-paste kode berikut,

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

Paste dibawah salah satu kode berikut yang ada pada template blog Anda,

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

• Tahap kedua, copy kode berikut,

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

Paste dibawah kode <p><data:post.body/></p>

• Kalo petunjuk di atas sudah dilakukan, maka hasilnya akan seperti ini: (perhatikan warna biru sebagai kode tambahan)

<div class='post-body entry-content'>
<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>
<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read more�</a>
</b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->

• Jika sudah klik SAVE TEMPLATE.
• Dari menu TEMPLATE kita pindah menu; klik Settings (Pengaturan) >Formatting (Format). Dibagian bawah ada tulisan Post Template (Template Posting), isi kotak dipinggirnya dengan kode berikut:

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

Klik SAVE (Simpan Pengaturan).

• Terakhir, setiap akan mempublish postingan, klik Edit HTML dan sisipkan kode tersebut diantara postingan yang akan ditampilkan dan disembunyikan. Contoh,
Ini merupakan paragraf pertama isi postingan Anda. <span class="fullpost"> dan ini merupakan paragraf selanjutnya postingan Anda yang tidak akan terlihat kecuali link read more di klik oleh pengunjung blog Anda.</span>
• Kode </span> tersebut disimpan paling akhir tulisan (postingan) Anda!.