Cara Membuat Read More atau Baca Selengkapnya Otomatis Di Homepage Blog

Jumpa lagi sahabat-sahabat blogger, setelah sebelumnya kita sudah membahas tentang  cara Membuat recent post yang mudah dan ringan, kali ini kita akan share sedikit tips untuk mendesain blog anda agar sedikit lebih menarik. Yaitu dengan menambahkan atau membuat tombol read more atau baca selengkapnya di Hompage atau Beranda.

Membuat link read more atau baca selengkapnya ini tidak jauh berbeda dengan postingan saya sebelumnya, tapi kali ini tidak melalui menu widget meelainkan dari menu template. 

Tujuan pembuatan baca selengkapnya atau read more ini adalah agar kita bisa menampilkan judul-judul saja di halaman awal atau beranda blog tanpa harus menampilkan keseluruhan isi postingan, sehingga pengunjung bisa melihat banyak isi postingan yang telah dibuat. Dan jika para pengunjung ingin membaca postingan itu mereka cukup mengklik Baca Selengkapnya atau Read More.

Berikut langkah-langkah yang harus dilakukan untuk membuat read more atau baca selengkapnya di Homepage (Beranda).

1. Login ke Blogger
2. Klik Template, Backup template untuk jaga-jaga bila diperlukan
3. Klik Edit HTML
4. Cari kode berikut :  ]]></b:skin> , untuk mempercepat pencarian tekan tombol Ctrl+f 
5. Masukan kode berikut : .post-thumbnail {width:100px;height:70px;float:left;margin:0px 10px 0px 0px;} sebelum kode  ]]></b:skin>
6. Kemudian Cari Kode: <data:post.body/>  kode tersebut jumlah biasanya ada 2 atau 3, pilih yang ke-2
7. Hapus Kode <data:post.body/>  dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:post.thumbnailUrl'>

<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>

<b:else/>

<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='http://http://rakjat-djelata.blogspot.com/'/></a>

</b:if>

<div class='post-snippet'><data:post.snippet/></div>

<a class='button' expr:href='data:post.url'>Baca Selengkapnya »</a>

</b:if>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

</b:if>

</b:if>

8. Ganti tulisan yang berwarna Merah dengan alamat blog anda      
9.Save Template, dan lihat hasilnya



Langkah diatas memang sedikit agak rumit, tapi jika langkah-langkah diatas dilakukan dengan benar maka dihalaman beranda blog anda akan muncul seperti contoh gamabar diatas. 

Demikian Tutorial read more atau baca selengkapnya otomatis di Homepage (Beranda). Jika ada kendala atau tambahan silahkan tulis di kolom komentar.

Baca juga: 

• Cara membuat Widget postingan terbaru di blog

Semoga bermanfaat...!!!