Cara membuat autoreadmore blogspot terbaru tanpa javascript

Auto readmore untuk blogspot model yang ini paling banyak diminati karena kesadaran akan pentingnya sebuah blog yang memiliki akses loading yang ringan.Loading blog ringan dimana disukai oleh visitor serta mesing pencari seperti google.
Kebanyakan template yang menggunakan auto readmore masih menggunakan javascript sehingga menambah beban loading halaman index blog.Artinya,loading blog sama beratnya jika tanpa menggunakan auto readmore.
Autoreadmore tanpa javascript ternyata jauh lebih ringan sehingga tidak percuma jika blog menggunakan fitur ini.Semua gambar thumbnail dan potongan artikel yang ditampilkan autoreadmore ini adalah benar benar ukuran yang dikompresi,itulah alasan kenapa menjadi lebih ringan.

Tag/script  autoreadmore ini memanfaatkan tag dari blogger sendiri.Dan salah satu keistimewan adalah tambahan  thumbnail default.Maksudnya yaitu jika postingan blog tidak ada foto(img) nya, maka thumbnal pengganti akan  muncul sebagai thumbnail default.Mirip sama wordpress gituloooh,,,,,.

Kerenkan?,,,,,,,,Kenapa tidak dicoba?,,,,,,,

Berikut langkah memasang autoreadmore tanpa javascript :

1.Login dasboard > Template > Edit HTML > Expand template widget,
backup dulu template kamu.

Jika template blogger kamu masih standard dan belum menggunakan autoreadmore,maka temukan dulu tag <data:post.body/> pada urutan yang pertama sendiri.Gunakan CTRL+F.

Jika template kamu sudah menggunakan autoreadmore yang versi javascript,maka cari code yang kira kira seperti berikut;

<data:post.body/>
<b:else/>
<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 id=’showlink’ style=’float:right;padding-top:5px;’><a expr:href=’data:post.url’> Readmore &#187;</a></span>
</b:if>

2.Jika code diatas sudah ketemu,maka replace dengan code berikut;

<data:post.body/>
<b:else/>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<b:if cond=’data:post.thumbnailUrl’>
<a expr:href=’data:post.url’ expr:title=’data:post.title’><img alt=’thumbnail’ class=’post-thumbnail’ expr:src=’data:post.thumbnailUrl’/></a>
<b:else/>
<a expr:href=’data:post.url’ expr:title=’data:post.title’><img alt=’thumbnail’ class=’post-thumbnail’ src=’http://lh3.ggpht.com/–Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png’/></a>
</b:if>
<div class=’post-snippet’><data:post.snippet/></div>
<a expr:href=’data:post.url’ expr:title=’data:post.title’> Readmore &#187;</a>
</b:if>

Jika sebelumnya template kamu menggunakan autoreadmore versi javascript maka temukan dan hapus script javascript yang terletak diatas code </head> berikut.Kira kira script JS nya seperti ini;

<script type=’text/javascript’>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 385;
summary_img = 285;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type=’text/javascript’>
//<![CDATA[
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>

3.Pasang code CSS berikut ini diatas code  ]]></b:skin>

.post-thumbnail{width:100px;height:90px;float:left;overflow:hidden;margin:5px 10px 5px 5px}
.post-snippet:before{content:attr(data-snippet)}

4.Simpan template Kamu