Cara membuat readmore otomatis di blogger

Readmore berfungsi untuk memotong karakter tulisan yang mau ditampilkan pada halaman utama blog, sehingga tulisan yang ditampilkan hanya cuplikannya saja. Dengan diberikan readmore halaman depan blog akan terlihat tertata lebih rapih,

contoh pengunaan readmore otomatis ini

Cara membuat memang sedikit rumit, berikut ini langkah membuatnya
1. Hal penting "BackUp terlebih dahulu template blog yang saat ini kamu gunakan, untuk antisipasi kesalahan pengeditan yang bisa membuat rusak template" cara backup template blog :
- klik Template
- lalu pilih Cadangkan/Pulihkan
- klik Unduh template lengkap. tunggu hingga proses download file template selesai, file ini bisa dipakai jadi cadangan bila terjadi kesalahan pengeditan.

2. Saatnya memulai pembuatan readmore otomatis di blogger, klik Template lalu pilih Edit HTML di halaman dashboard blogmu selanjutnya klik saja Lanjutkan.
Setelah form Edit HTML terbuka, beri ceklist pada Expand Template Widget (dengan menceklist ini maka semua kode HTML akan terbuka dan memudahkan pencarian kode HTML)

3. Cari kode </head> gunakan fasilitas pencarian misal menggunakan mozilla Ctrl+F. lalu copy-paste script dibawah ini dan letakkan tepat diatas kode </head>

copy paste kode ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'"
width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>'; summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

4. Cari lagi kode html ini <data:post.body/> atau <p><data:post.body/></p> setelah ketemu hapus kode tersebut lalu ganti dengan kode dibawah ini

copy paste kode ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; +
data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a
expr:href='data:post.url'>&#187;&#187;&#160;readmore...</a></span>
</b:if>
<b:if cond='data:blog.pageType ==
&quot;item&quot;'><data:post.body/></b:if>

Keterangan : tulisan yang tebal bisa anda ganti dengan :
==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

5. Klik pratinjau  untuk melihat terlebih dahulu tampilan blog. setelah terlihat readmore otomatis sudah terpasang klik Save template.

kadang-kadang readmore tidak muncul, bila belum terpasang mungkin terjadi kesalahan dalam penentuan kode <data:post.body/> atau <p><data:post.body/></p> di langkah no 4, biasanya dalam sebuah template kode tersebut ada banyak ditambah lagi struktur template blogger satu dengan yang lain berbeda-beda.
Cara mengatasi cari kembali kode  <data:post.body/> atau <p><data:post.body/></p> yang lainnya dan setelah ketemu yang pas hapus kode tersebut lalu ganti dengan script di langkah no 4