Membuat auto readmore pada templet bawaan blogger(simple template)

Banyak sekali rasanya tutorial-tutorial membuat auto readmore bertebaran dimana-mana,tapi yang akan tutorial blog sajikan kali ini lebih menitik beratkan pada templet bawaan blogger(simple template) atau templet default,yaitu bagaimana caranya Membuat auto readmore pada templet bawaan blogger,mari disimak tutorialnya.

1.masuk ke dashbor blogger -->>>setelan-->>>template-->>>(Jangan lupa backup dulu templetnya,jaga-jaga jika terjadi kesalahan)-->>>edit HTML-->>>centang Expand widget templates.

2.cari kode </head>

3.kopy paste script dibawah ini sebelum kode </head>

<b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 310; summary_img = 270; img_thumb_height = 110; img_thumb_width = 130; </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:0;margin:0 10px 0 0"><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> </b:if>

4.hapus kode yang berada DIANTARA <div class='post-header-line-1'/></div> dan <b:if cond='data:post.hasJumpLink'> kemudian ganti dengan script dibawah.

<div class='post-body entry-content'> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:5px;'><a expr:href='data:post.url'>Readmore →</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

5.save template dan lihat hasilnya.