How to Make an Auto Read More Template

How to Make an Auto Read More Template
How to Make an Auto Read More Template - This method has been applied in many blog template modifications.

These tips for those of you who use blog templates that have not displayed a summary of posts on the front page, aka the appearance is the same as the single post / single page.

Generally, blog templates now automatically use auto read more or display a summary of posts on the front page of the blog.
How to Make an Auto Read More Template

1. Click "Template"> "Edit HTML"
2. Search (CTRL + F) code <data:post.body/>.
If there are more than two <data:post.body/>, select the second one. If it fails, select the third or first, etc. Just try one on one until it works.
3. Replace or replace the <data:post.body/> code with the code below

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; +'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<>&quot;);</script>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

4. Look for the code </head> and copy the following code right above it

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
<script type='text/javascript'>
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;

5. Save the Template
You can change the size of the image / thumbnail by changing the number 120 to smaller or larger.
You can also change the number / length of characters by replacing the 490 number (if the post is without photos) and the number 400 (if the post has a photo).
Thus How to Make an Auto Read More Template, thank you for visiting. Greetings Blogger.

Related Post


Silahkan Memberikan Komentar Jika Ada Hal Yang Kurang Dipahami Dengan Topik Yang Telah Sobat Baca. Biasakan Berkomentar Dengan:

♥ Sopan dan Bahasa Yang Mudah Dipahami.
♥ Tidak Memasukkan Link Aktif Dalam Form Komentar.
♥ Berkomentar Sesuai Artikel Atau Postingan.
♥ Berilah Informasi, Jika Script Atau Link Yang Tidak Berfungsi Dan Mati.
♥ komentar Jorok / Kasar / SARA / PORNO Anggap Sebagai SPAM.