Add " Read more " button in blogger post

Want to have a read more feature just like my blog?

Want to have a professional look for your blog posts?

Believe me you can add this feature in your own blog in a minute.

Dont worry its really very very easy,just follow the steps given below


Step 1. Goto your blog Layout and then goto Edit HTML.Download your current template.



Step 2: Now press ctrl+f and find </head> tag,then copy and paste the code given below just before the </head> tag and save the template.

<SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 500; summary_img = 580; img_thumb_height = 320; img_thumb_width = 247; </SCRIPT> <SCRIPT src='http://www.yourjavascript.com/45031411101/readmore.js' type='text/javascript'/><style type='text/css'>a.linkopacity {    display:block;    width:139px; height: 27px;    background-image: url(http://img197.imageshack.us/img197/4875/readmore29885263.png);    background-repeat: no-repeat;    background-position: 0 0;    }a.linkopacity:hover {    background-image: url(http://img46.imageshack.us/img46/8212/readmore19911462.png);    }</style> 

Step 3: Now click Expand Widget Templates press ctrl+f and find <p><data:post.body/></p> tag and replace it with the code given below and save the template.

<p> <b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p><b:else/><DIV expr:id='&quot;summary&quot; + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</SCRIPT> <div style='clear: both;'/> <div style='border:0px;padding-top:5px;;float:right;text-align:right;'><span class='readon'><a class='linkopacity' expr:href='data:post.url' rel='bookmark'/></span></div></b:if></p>

you are done,check your blog.

Customize the code to suit your template :
Look at the code given at step 2.you can always customize the code to suit your template.

summary_noimg = 500;

If your post contains no image then 500 characters will be shown.you can change 500 to any thing to suit your template.


summary_img = 580;

If your post contains image then 580 characters will be shown.You can change 580 to any thing to suit your template.

img_thumb_height = 320;

This will decide the height of the thumbnail to be shown in the post. You can change 320 to any thing to suit your template.

img_thumb_width = 247;
This will decide the width of the thumbnail to be shown in the post. You can change 247 to any thing to suit your template.

This is all.Hope Everything is cleared.If you have any problem to understand above steps,please feel free to ask any question in comment section.

Download Full Tutorial as a PDF

Download from rapidshare

Posted in: BlogTips