Cara Membuat Artikel Bersambung dengan "Read More"

Biasanya bila kita membuka suatu blog atau situs, biasanya pada halaman utama, artikel yang ada di sana hanya berupa cuplikan singkat. Apabila Pembaca ingin membaca lebih lanjut isi artikel selengkapnya, maka biasanya terdapat tombol "Read More" atau "Baca Selengkapnya". Tujuan dibuatnya artikel dalam bentuk singkat pada halaman utama ini adalah supaya tampilan pada menu utama suatu situs atau blog tidak terlalu panjang sehingga pembaca tidak perlu melakukan scroll hingga panjang ke bawah.

Nah, banyak pembaca yang mungkin bingung, sebenarnya bagaimana sih cara membuat artikel yang berupa cuplikan singkat tersebut, dan apabila ingin baca lebih lanjut tinggal meng-klik tombol "Read More", maka seluruh artikel lengkap akan muncul dalam 1 halaman penuh. Sebenarnya caranya cukup mudah. Kita hanya perlu meng-utak-atik script html dari template situs atau blog kita. Berikut penulis akan uraikan cara untuk membuatnya pada blogspot.

Pertama:
Buka menu blogspot Anda, kemudian klik tombol "Design" lalu "Edit HTML".
Maka akan muncul Edit Template; pada bagian sebelah kanan atas (bagian edit template tersebut) terdapat sebuah kotak kecil yang bertuliskan "Expand Widget Templates" dapat kita beri check mark. Beri tanda check (v).

Ingat: sebelum Anda mengutak-atik kode HTML ini, sebaiknya Anda backup dahulu template blog Anda supaya jika kelak terjadi kesalahan dalam mengutak-atik script tersebut, Anda tetap dapat mengembalikan ke template awal.

Kedua:
Pada script template tersebut, carilah kata berikut ini (script pertama):

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

Tips untuk menemukan script ini, gunakan Find (Ctrl+F) kemudian ketik script ini pada menu pencarian "Find:".

Di bawah script tersebut akan kita temukan juga script (script kedua):

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

Setelah ditemukan kedua script ini, kemudian sisipkan script berikut di antara scrip pertama dan script kedua yang telah kita temukan 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>

Kemudian di bawah script kedua, sisipkan script berikut ini:

<a expr:href='data:post.url'>Readmore »»</a>
</b:if>

Sehingga jika prosesnya sudah kita lakukan dengan benar, maka script selengkapnya adalah sebagai berikut (script warna biru adalah script awal sebelum direkayasa sedangkan script warna merah adalah merupakan script yang telah kita tambahkan):

<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'>Readmore »»</a>
</b:if>
<div style='clear: both;'/>

Setelah script ini telah kita edit, maka jangan lupa menyimpannya dengan meng-klik tombol "save template".

Ketiga:
Langkah selanjutnya adalah masuk ke menu: "Setting" ("Pengaturan"), kemudian menu "Formatting" ("Format"), lalu cari "Format Template" (bagian paling bawah). Lalu masukkan script berikut pada kotak "Format Template" tersebut:

<div class="fullpost">
</div>

Kemudian simpan.

Maka pada saat kita akan membuat posting baru, maka selalu dalam kotak posting (versi "Edit Html") akan muncul:

<div class="fullpost">
</div>

Script ini janganlah dihapus. Tulisan yang akan dipenggal dan muncul setelah di klik "Read More" diletakkan di antara kedua script ini.