Membuat Read More (Baca Selanjutnya...)

Read more ato baca selanjutnya ... ato apalah, merupakan bagian dari cara membuat variasi sebuah posting. Untuk blog yang tidak banyak isi postnya mungkin tanpa read more ngak masalah, tetapi bagi blog yang isinya udah buanyak sekali tentu hal ini diperlukan. Kalau ngak pakai read more akan puaanjang dan ke bawah terus, ah sudah deh, susah ngebayangin.

Untuk membuat read more sebenarnya tidaklah sulit bahkan Sobat bisa mendapat kode html di banyak blog yang memposting mengenai read more. Tapi Sobat ngak perlu jauh-jauh cari kode html dan langkah-langkah penempatan kode html, karena disini Sobat akan mendapatkan secara lengkap, singkat dan sukses.

Aah, kepanjangan.

Langsung aja :
1. Login ke Blogger
2. Klik Setting
3. Klik Formatting

Lihat paling bawah, ada text area kosong disamping tulisan Post Template, isi tesxt area kosong tersebut dengan kode di bawah ini :

<div class="fullpost">


</div>

Kemudian klik tombol yang bertuliskan Save Setting

Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut.

Langkah selanjutnya adalah:
1. Lihat kanan atas dan klik Dasbord
2. Klik Layout
2. Klik Edit HTML
3. Centang Expand widget template

Selanjutnya cari kode seperti ini <div class='post-body '>

Kalau sudah ketemu, copy paste kode berikut persis dibawah kode tersebut.

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


Kemudian lihat dibawahnya ada kode seperti ini <p><data:post.body/></p>

Copy kode berikut dibawah kode tersebut

<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><strong>&#187;&#187;&#160;&#160;read more</strong></a></span>
</b:if>


Nah kalo dilihat hasilnya seperti ini

<div class='post-body '>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><strong>&#187;&#187;&#160;&#160;read more</strong></a></span>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Kode berwarna biru merupakan kode asli sedang yang berwarna hitam adalah kode yang ditambahkan.


Atau jika Sobat sulit satu per satu, Sobat langsung aja cari kode

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

Kemudian hapus kode tersebut dan ganti dengan kode berikut (kode yang diatas tadi)

<p><data:post.body/></p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><strong>&#187;&#187;&#160;&#160;read more</strong></a></span>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Jangan lupa tekan save template

Jika Sobat pingin tahu hasilnya silakan lihat blog ini=> contoh read more
Nah, mudah kan. Eit... ada yang ketinggalan.

Sekarang Cara Posting Artikel
# Klik menu Posting
# Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting
tadi, yakni :

<div class="fullpost">


</div>

Cara Posting :

Tulisankan artikel yang ingin tampak pada blog sebelum kode :

<div class="fullpost">

Tulis seluruh sisa artikel sesudah kode di atas tadi dan sebelum kode :

</div>

Nah, jadi deh read more nya.