Cara membuat auto readmore tanpa javascript

Setelah sebelumnya saya membahas cara membuat menu navigasi breadcrumbs agar nama label bisa tampil di indeks google, berikutnya saya ingin postingkan dokumentasi cara membuat auto readmore tanpa javascript namun menggunakan xml default blogger yang biasa dipasang di tema blogger for mobile, dan telah saya gunakan pada template yang saya gunakan sekarang.

Banyak keuntungan yang bisa diperoleh jika menggunakan konsep auto readmore atau ringkasan ini, diantaranya bisa mempercepat loading saat di halaman depan(home page) karena konsep ini hanya mengambil salah satu gambar dari dalam satu artikel berbeda halnya dengan yang menggunakan java script seperti pada artikel Cara memasang Auto readmore pada blog yang memuat terlebih dahulu semua gambar walaupun di halaman depan hanya menampilkan salah satu gambarnya.

Adapun kerugian nya dari konsep auto readmore ini yaitu gambar thumbnail atau gambar ringkasan yang berukuran kecil, dan ringkasan artikel yang sedikit tidak bisa diubah (dengan jumlah karakter yang sedikit karena digunakan di tema mobile).
Cara membuat auto read more tanpa javascriptnya adalah sebagai berikut:
1. Masuk ke menu edit html, saya sarankan download terlebih dahulu templatenya sebagai antisipasi jika kamu melakukan kesalahan.
2. Centang menu Expand Template Widget, cai kode dibawah ini :

<data:post.body/>

ATAU

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

3. Biasanya ada dua kode seperti kode diatas, Ganti dengan kode nya yang pertama dari atas dengan kode dibawah ini:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>

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

<div class='post-home-thumbnail'>
<div class='Image-home'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</div>

<b:else/>

<div class='post-home-thumbnail'>
<div class='Image-home'>
<img border='0' height='95' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0qiSvotGFSxyCYjZtefnIJ1pW6w-ANfx6ZQQfF5eh2PLL0-OfamqGLHCNmOvCpZe8APC7OX41M-s9k6KSe-98SpVbegmta3QtloszxJxDcqdZ-WxESDp8Wk1iEfRWqmLMBG4MXkO6_H4/s1600/no-image.png' width='95'/>
</div>
</div>
</b:if>

<div id='post-home'>
<b:if cond='data:post.snippet'>
<data:post.snippet/>
</b:if>
</div>

<div class='readmore'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>Read More</a></b:if>
</div>

<b:else/>

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

<b:if cond='data:blog.pageType == "static_page"'>
<p><data:post.body/></p>
</b:if>

4. Sekarang cari kode ]]></b:skin> dan simpan CSS ini diatasnya:

/*Css gambar ringkasan auto readmore nya*/
.post-home-thumbnail img{
float:left;
margin:0 5px 0 0;
width: 75px;
height:75px;
}
/*css untuk link readmorenya*/
.readmore {
float:right;
font-size:11px;
}