How to add "Read more" to your blog's homepage

As the content of your blog or website goes on increasing, it becomes more important for the authors to provide a customize homepage to their users with an insight sneak view of the blog article at the very own homepage. This type of customization helps the audience of your website to have a look on more than one article at a time, right on the home-page.

This can be done in blogger by following certain step. Don't worry is you do not know hardcore javascript/css. All you need is to have the basic understanding of HTML.

Below are the steps with which you can configure your homepage and make your blogs article short and adding a "Read More...." or "Continue Reading this posts" or you can add your own.

NOTE:- Please note that you must take a backup of your current template to avoid any mistakes circumstances.

Step 1:- Open your blogger Dashboard >  Click on design > Edit Html > Check on Expand widgets Template box.
blog edit html



Step 2:- find the code <head> using ctrl+f in your browser, and then write or just paste the following peice of code, just below the <head> command

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 140;
img_thumb_width = 200;

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>

Step 3:- Replace the <data:post.body/> With The Code Below

<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>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >
Read more ... </a></span>
</b:if>
</b:if>

Step 4:- You are done. If you want to add your own creative line, just replace the "read more.." given in red above with your own line like "Continue Reading..".


Step 5:- Save the template.

Thats it. You have learnt how to customize your homepage to add all your blog article with "read more.." thumbnail.






Share on Google Plus

About Anish Sharma

0 comments:

Post a Comment