Cara Membuat Readmore - Readmore sebenarnya adalah penyingkat konten anda pada homepage blog. Biasanya readmore sudah terpasang otoamatis di template-template blog editan atau template yang diperjual belikan. Dengan adanya readmore ini akan membuat tampilan blog anda menjadi minimalis dan enak dipandang. Selain itu, juga dapat meningkatkan rasa penasaran pembaca terhadap konten anda. Namun, tidak semuanya template terdapat fitur readmore otomatis. Jadi, anda harus memasangnya sendiri.
Baca Juga : Cara Membuat Recent Post dengan Gambar di Blog
Readmore yang akan saya share memiliki dua tampilan yang bisa anda pilih untuk digunakan. Kedua-duanya sudah saya test dan terbukti work. Mengenai tampilan dan cara memasangnya silakan lihat panduannya dibawah ini :
Cara Membuat Readmore Otomatis di Blog Keren
#1 Readmore Otomatis Tampilan Gambar di Atas
1. Login ke akun blogger anda.
2. Masuk kebagian Template.
3. Edit HTML
4. Cari kode <data:post.body/> lebih mudahnya tekan CTRL+F dan cari. Nanti ada lebih dari satu kode <data:post.body/>. Pilih yang menurut kalian itu merupakan bagian konten. Biasanya pada nomor 2 atau 3.
5. Ganti kode <data:post.body/> diatas dengan kode dibawah ini :
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='gambar-post-poinid'
expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='gambar-post-poinid'
expr:title='data:post.title' src='http://1.bp.blogspot.com/-
XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-
thumbnail.jpg'/></a>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<div class='rm-button-wrap'>
<a class='button' expr:href='data:post.url'>Baca
Selengkapnya</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
6. Cari kode ]]></b:skin> kemudian taruh kode dibawah ini diatas kode ]]></b:skin> tersebut :
.gambar-post-poinid {
width:100px;
height:100px;
float:left;
margin:0px 10px 0px 0px;
}
7. Simpan template anda dan lihat hasilnya.
Keterangan :
Bila tidak berhasil berarti kode <data.post:body> yang anda ganti salah. Sebaiknya anda coba dengan kode <data.post:body> lainnya. Usahakan sebelumnya backup template anda.
#2 Readmore Otomatis Tampilan Gambar di Samping
1. Login ke akun blogger anda.
2. Masuk kebagian Template.
3. Edit HTML
4. Cari kode <data:post.body/> lebih mudahnya tekan CTRL+F dan cari. Nanti ada lebih dari satu kode <data:post.body/>. Pilih yang menurut kalian itu merupakan bagian konten. Biasanya pada nomor 2 atau 3.
5. Ganti kode <data:post.body/> diatas dengan kode dibawah ini :
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='gambar-poinid'>
<b:if cond='data:post.firstImageUrl'>
<img expr:alt='data:post.title'
expr:src='data:post.firstImageUrl'/>
<b:else/>
<b:if cond='data:post.thumbnailUrl'>
<img expr:alt='data:post.title'
expr:src='data:post.thumbnailUrl'/>
<b:else/>
<span>No thumbnail</span>
</b:if>
</b:if>
</div>
<data:post.snippet/>
<a class='button' expr:href='data:post.url'>Baca
Selengkapnya</a>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
6. Cari kode ]]></b:skin> kemudian taruh kode dibawah ini diatas kode ]]></b:skin> tersebut :
.gambar-poinid{margin-bottom:20px;border:1px solid #ccc;box-shadow:0
0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #ccc;padding:10px
0;width:100%;height:90px;text-align:center}
.gambar-poinid img{border:0;padding:0;max-width:96%;max-height:90px}
.gambar-poinid span{font-size:26px;line-height:70px;font-weight:bold}
Keterangan :
Bila tidak berhasil berarti kode <data.post:body> yang anda ganti salah. Sebaiknya anda coba dengan kode <data.post:body> lainnya. Usahakan sebelumnya backup template anda.
Nah, itulah cara simple membuat readmore otomatis di blog yang dapat anda coba terapkan pada blog-blog anda. Semoga berhasil dan bila ada pertnyaan silakan bisa komentar dibawah.
