Cara Menambahkan Auto Readmore Pada Blogspot Dengan Javascript

Cara Menambahkan Auto Readmore Pada Blog Dengan Javascript - Auto Readmore bagi pemula pasti masih sangat asing, tapi bagi Anda yang pernah mendownload template pasti sudah tahu dengan Auto Readmore karena biasanya template hasil download pada umumnya menggunakan Auto Readmore. Auto readmore berfungsi agar mempercepat loading template dengan hanya menampilkan isi artikel hanya beberapa baris saja dan javascript atau gambar serta dengan begitu tampilan blog pada Home ini lebih rapi.

Baca Juga : Cara Terbaru Ganti Template Di Blogspot Dengan Hasil Unduhan

Bagi Anda yang menggunakan template bawaan blogger dan berniat ingin mengguanakan auto readmore, dapat Anda ikuti langkah - langkahnya disini sebagai berikut :

1. Masuk ke Dash Blogger
2. Klik Template lalu Edit Html
3. Pada kode - kode yang muncul cari </head>, letakan kode di bawah ini tepat dibawah </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 128;
img_thumb_width = 128;
</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(thumbnail_mode == "yes") {
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>

Selanjutnya cari kode <data:post:body/> yang urutan pertama dari atas, lalu ubah kode ini dengan kode yang dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>

Ini menggunakan kode - kode html dari kaplik.com, selanjutnya jangan lupa untuk melihat pratinjau untuk memastikan template Anda tidak ada yang rusak, namun jika template Anda rusak, mungkin karena salah memasukkan kode - kode maka jangan khawatir, klik saja kembalikan perubahan ". Maka template Anda akan kembali seperti semula dan jika tidak ada masalah Anda dapat Menyimpan Template yang telah Anda tambahkan kode - kode tadi.

Sekarang blog Anda telah menggunakan Auto readmore, dan loading blog Anda sudah semakin cepat, untuk cek loading Blog dapat Anda baca di sini

Baca Juga : Cara Menambahkan Menu Navigasi di Bawah Header