Membuat Read More di Blogger

Agar blog tampak lebih minimalis dan elegant, ada baiknya apabila kita meringkas (read more) artikel yang ada di halaman utama blog anda. Selain tampilan yang lebih minimalis, read more juga dapat mempermudah para pembaca blog kita untuk menemukan artikel yang dicari.

Tahap I

• Silahkan sobat login dulu di blogger

• Kalo dah masuk, pada jendela dashborad silahkan klik Menu Layout lalu edit HTML.

• Pada jendela edit HTML, sebelum terjun ke template sobat, jangan lupa untuk memberi tanda checklist di samping Expand Template Widget. Tunggu sampai beres loading

• Kalo dah selesai....Langsung lihat template sobat dan cari kode seperti ini :

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

• Kalo dah ketemu, copy paste kode di bawah, dan letakkan di template sobat persis di bawah kode yang diatas

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


• Awas jangan sampai salah simpan ya....Kalo dah selesai, perhatikan di bawah kode yang sobat copy paste tadi ada kode seperti di bawah ini :

<p><data:post.body/></p>
<div style="'clear:"> <!– clear for photos floats –>
</div>

• Nah, diantara kode

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


• dan kode

<div style="'clear:"> <!– clear for photos floats –>
</div>


• Letakan kode ini : (ingat lo harus diantaranya)

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


• Sehingga hasil akhir kodenya seperti ini :

<div class='post-header-line-1'/>
<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>
<a expr:href='data:post.url'>Read More .. </a>
</b:if>

<div style="'clear:"> <!– clear for photos floats –>
</div>

Nah....kode yang berwarna biru itu adalah kode tambahan, sedangkan yang hitam adalah sisanya. Ok....tahap I sudah selesai. Sekarang kita berlanjut ke tahap ke II.

Tahap II

• Setelah beres edit HTML (jangan lupa di save), Silahkan sobat masuk ke menu Setting lalu pilih Formatting.
  
• Setelah itu sobat turun ke bawah dan cari Template Posting.
• Kalo dah ketemu, isi kotak kosong yang ada di sampingnya dengan kode dibawah ini :
  

<span class="fullpost">

</span>

• Kalo udah klik save....

Cara memposting

Ketika mulai posting, anda akan melihat kode seperti di atas di bagian Edit HTML. Nah supaya postingan kita Dapat teringkas, maka ketika memposting letakkan bagian posting yang akan ditampilkan di atas kode

<span class="fullpost">

sedangkan sisanya, letakkan diantara kode

<span class="fullpost">

dan

</span>

Nah....selesai deh.