Cara Membuat Read More Otomatis di Blog Blogspot

Selain menambahkan widget yang keren, kita juga dapat mengubah penampilan blog kita dengan membuat Read More. Read more ada 2 macam yaitu read more yang dibuat setiap memposting dan berlaku untuk setiap postingan, dan read more yang dibuat sekali dan berlaku untuk semua postingan atau sering disebut dengan read more Otomatis. nah, kali ini Ave_Blog akan membahas yang instan saja ( read more otomatis ).
langkah-langkahnya adalah sebagai berikut :
1. log in ke dasbor blogger sobat.
2. lalu pilih menu rancangan / tata letak  > Edit HTML
3. centang kata " Expand Template Widget "
4. lalu cari kode </head> untuk mempermudah sobat dapat mencari dengan F3 atau ctrl + F.
5. selanjutnya silahkan sobat masukkan kode di bawah ini tepat diatas kode tersebut.

 

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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>

 

6. setelah itu, silahkan sobat cari lagi kode <data:post.body/> seperti biasa untuk mempermudah silahkan

    sobat gunakan ctrl + F atau F3

7. kemudian selanjutnya ganti kode tersebut dengan kode dibawah 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'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

 

8. setelah selesai, read more sobat telah jadi. namun, sebaiknya sebelum sobat meng-klik kata save template 

    silahkan sobat klik pratinjau dulu untuk memastikan bahwa read morenya sudah tepat.

 

....selamat mencoba.....