"Continue Reading..." links in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <a href="http://www.brainsonfire.com/blog/wp-content/uploads/2014/11/Blogging-613x439.gif" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: justify;"><img border="0" height="228" src="http://www.brainsonfire.com/blog/wp-content/uploads/2014/11/Blogging-613x439.gif" width="320" /></a><br /> <div style="text-align: justify;"> With little bit of modifications to your Blogger <span class="fullpost">If you observer my blog, voting widgets are displayed on my post links and not in my main page. Also, most of the images in </span>my posts are shown only in the actual post links only. Moving bandwidth intensive content to posts’ pages loads your main page very fast.</div> <br /> <div style="text-align: justify;"> Let us see the steps to be followed for modifying the template to implement this</div> <span class="fullpost"><div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Log in to your blogger account select Layout of the blog which you want to modify</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Navigate through Template –> Edit HTML</div> <div style="text-align: justify;"> Take backup of your template by clicking Download Full Template. This backup will help you if you want to revert to old template</div> <div style="text-align: justify;"> Search for ]]></b:skin> in your template HTML and paste the following piece of code in between ]]></b:skin> and </head></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <!-- Style to implement "Read more on this Article"</div> <div style="text-align: justify;"> link in all</div> <div style="text-align: justify;"> the posts</div> <div style="text-align: justify;"> (Start) --></div> <div style="text-align: justify;"> <style></div> <div style="text-align: justify;"> <b:if cond='data:blog.pageType == "item"'></div> <div style="text-align: justify;"> span.fullpost {display:inline;}</div> <div style="text-align: justify;"> <b:else/></div> <div style="text-align: justify;"> span.fullpost {display:none;}</div> <div style="text-align: justify;"> </b:if></div> <div style="text-align: justify;"> </style></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <!-- Style to implement "Read more on this Article"</div> <div style="text-align: justify;"> link in</div> <div style="text-align: justify;"> all the posts</div> <div style="text-align: justify;"> (End) --></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Save your template and click on select Expand Widget Templates Search for <data:post.body/> in the template HTML and paste the following piece of code after <data:post.body/></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <!-- Code to show "Read more ..." Link (Begin) --></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <b:if cond='data:blog.pageType != "item"'></div> <div style="text-align: justify;"> <span></div> <div style="text-align: justify;"> <a expr:href='data:post.url' style='color:#0000FF;</div> <div style="text-align: justify;"> text-align:right;</div> <div style="text-align: justify;"> font-weight:bold; text-decoration:none' >Read more ...</div> <div style="text-align: justify;"> </a></div> <div style="text-align: justify;"> </span></div> <div style="text-align: justify;"> </b:if></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <!-- Code to show "Read more..." Link (End)</div> <div style="text-align: justify;"> --></div> <div style="text-align: justify;"> You can change the red text with any Text like “Continue reading..” “Read rest of this entry” “Read more” etc as per yours blogs content.</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Post Modifications - The final piece that we need is a little bit of code in your actual post. Each post that you want to use this feature on will need this code</div> <div style="text-align: justify;"> <span class="fullpost"></div> <div style="text-align: justify;"> </span></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> This part can actually go in the post template, if you don’t want to have to type it for each post. You’ll enter the summary text outside the span tags and the remainder inside, like so:</div> <div style="text-align: justify;"> Now, when a reader visits your blog, this post will appear like below:</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Read more...</div> </span><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://www.brainsonfire.com/blog/wp-content/uploads/2014/11/Blogging-613x439.gif" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: justify;"><br /></a></div> <div style="text-align: justify;"> Beta </div> <div style="text-align: justify;"> template you can easily implement expandable post summaries in your blog main page. Expandable posts gives very professional and elegant look to your blog. You can hide most of the detailed content from main page and display them when the page of the post is opened.</div> </div>

Blogger Tips "Continue Reading..." links in Blogger

With little bit of modifications to your Blogger If you observer my blog, voting widgets are displayed on my post links and not in my mai...

Read more »