How To Add Blogger Post Summaries With Read More Button

Hi friends many you have seen many blog which looks very nice due to they have added a thumbnail which is known as read more. Also read more thumbnail in blogger makes you a perfect and good blogger. I got this question from a lot of people that how to add a read more button in blogger.

Also Read Make Contact Us Form In Blogger Blog

Also you can make the post summaries by using read more buttons. This trick helps to make perfect blogger templates. This is a very easy step to add the post summaries with read more button. This is take time of 5 minutes but after this your blog would be part of a amazing look. So now let’s start.

Step 1
(A) Login to your account.
(B) Click on template.
(C) Click on HTML.

Step 2 – Now search <data:post.body/> second time

Step 3 – Replace<data:post.body/> with the given below given code.

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<div expr:id=’&quot;summary&quot; +’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(&quot;summary<>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&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>

Step 4 
(A) Now search </head>
(B) Put below given code above the </head>

<script type=’text/javascript’>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
<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, pURL, pTITLE){
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: 10px;”><a href=”‘+ pURL +'” title=”‘+ pTITLE+'”><img src=”‘+img[0].src+'” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px” /></a></span>’;
summ = posts_thumb_sum;

var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<style type=’text/css’>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }

(C) After putting code click on “Save Temples”

Now read more button with post summaries will show in your blog. This is a good way to give a great look to your blogger. You need to know.

Also Read How To Create HTML Coding ?

(1) Read more with post summaries will show only in main page, label page and achieve category.
(2) If second <data:post.body/> is not working the try it with first or third.
(3) You modify the value which is marked as read and blue as per your requirement.

How To Post Article In Blogger Blog?

Friends in our last article we have teach that How To Start A Blog Free On Blogger. Now today we are here to go on more steps in Blogging it’s about how to post article in Blog. This is a one more step towards how to start a successful blog.

Post article in a blog is again a very simple trick. It will take 2 minutes if your material is ready and you have good internet connection speed. So now I am here to teach you about this. Hope you will love to post article in Blogger. So now follow my 8 steps.

Also Read How To Start A Blog Free On Blogger

Step-1 Always keeps these three things before writing a article of Blogger post
(A) Subject of post.
(B) Contain of post.
(C) Knowledge about the article which you are going to write.

Step-2 Log in to clicks on Start Posting.

Step-3 Type Subject makes sure that your subject related to your article.

Step-4 Click on Compose for Plain Text. Also write some body which you want to write.

Step-5 If you know HTML Codding then click on HTML Codding and write whatever you want to share. Read How To Create HTML Coding ?

Step-6 Now you need very careful please follow this process if you want to given a professional look to your article.
(1) See Preview Of Post.
(2) Save Your Post.
(3) Then click on Publish.

Step-7 Now if you want to do more post then go to the http://www.blogger.comclick on post.

Step-8 Click on new post and follow Step 1, 2, 3,4,5,6

Now you have successfully posted article in Blogger. Hope you have enjoyed this trick. So also put your comment for this article so that we can review our article. Do not forget to share this is you liked.