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.

Advertisement

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>

Lihat Juga :  Cara paling jitu agar artikel tidak bisa dicopypaste

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

You Are Done!
Advertisement

Mungkin Anda juga Menyukainya :

6 thoughts on “Cara membuat autoreadmore blogspot terbaru tanpa javascript

  1. Ed Post author

    @Zaenal Abidin Blogs

    Coba diteliti lebih lanjut gan,yang menyebabkan artikel hanya tampil sepotong(summary) itu adalah code dari blogger sendiri yang digabung dengan tag kondisi sehingga hanya tampil dihalaman index dan label.
    Coba lihat code yang cuma nampilin artikel sepotong:

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

    Itu bukan javascript gan,,,

    Reply
    1. Zaenal Abidin

      hehe,, sorry gan, ane buru-buru sehingga tidak memahami paragpraf berikut; "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;"..

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *