--> Learn How To Show Post Summary using The “Read More Link” or “Continue Reading link” | Experience Lab - Online business creation and development guide for bloggers and startups

Learn How To Show Post Summary using The “Read More Link” or “Continue Reading link”

Update: You don't need to follow this long method now. To add a read more or jump break anywhere on your post simply switch to &quo...





Update:

You don't need to follow this long method now. To add a read more or jump break anywhere on your post simply switch to "HTML" mode of your editor and paste this code in it:


<!--more-->

Totally Exceptional!! A good blogger can be identified by the way he manages his blog and organizes his posts. The homepage is the most important part of every blog. The homepage must contain up to 5-6 posts in order to seize the attraction of reader as much as possible. Keeping a reader busy for a longer time is what I call a blogging success. Showing 5-6 posts is load-time and user friendly only if you show a summary of each post. On my homepage you must have seen a Read More Link, clicking which expands the entire post. Look at a screen shot Below,



read-more1

This link just adds beauty to your blog along with some pro spice to it. So lets learn how to summarize your posts and give them the expandable functionality.

The steps that must be followed for planting this TNT are,


  • Go to layout > Edit HTML


layout-edit-html



Now The Most Important Step –> Back Up Your Template


By backing up your template I mean that you must save a copy of your current template in your computer hard drive. If in case something goes wrong, you can restore your template and have everything working as normal as before.

To backup your template click on the link saying Download Full Template , as shown below

backup-template

If suppose something goes wrong , you will simply click the Browse button, locate your saved template and then simply click the Upload button to restore your template back to normal.


  • Click on "Expand Widget Templates" at the top right hand corner of your Edit HTML page


expand-widgets


  • Now find this code ]]></b:skin> 


Tip: Pressing Ctrl + F  and then paste this code into the search box, as shown below,

Search-code

The search box is an easy way of finding codes in your template.


  • Just after ]]></b:skin> copy paste the code below,


Tip: Highlight the code below and then press Ctrl + c to copy the entire code and then press Ctrl + v to paste the code


<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>





  • Now find this code  <data:post.body/>


And just after <data:post.body/> add the code below,



<!--READ-MORE-STARTS-->


<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>


<div style="text-align: right;">Read More ->></div></a>
</b:if>


<!--READ-MORE-STOPS-->


You can replace the text in red with anything you like, e.g: Continue Reading, Keep Reading

If you want to shift the "Read More->>" text to the extreme-left side, use this code:


<!--READ-MORE-STARTS-->

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>

<div style="text-align: left;">Read More ->></div></a>
</b:if>

<!--READ-MORE-STOPS-->



  • Save your template and you are Done!




Read Further to know How to Apply this TNT in your Posts

Now whenever you want to write a post in windows Live Writer, follow the procedure below,


  • Once you had finished writing your post, as shown below,


Readmore1


  • Just after completing your post click on the source button at the bottom of your windows live writer page,


readmore2



UPDATE: Instead of trying the long method below, there is an easy shortcut. Wherever you want the read more link to appear, simply paste this code there:





Nothing else required! :)









You will see something like this,

 source code for your post


  • Now use the code below to hide the portion of your post that you don’t want to be shown on your homepage



<span class="fullpost">

</span>

Now suppose if you want to show the post only till the lines

I have explained everything in these images so read carefully!

So you will add the codes as shown below,

the highlighted source code refers to the hidden text

You can see in the image above that I have added <span class="fullpost"> just above the part of the post I wanted to hide. The text that I want to hide is the one below,


“Please use windows live writer only for writing quality posts. This TNT of Read More link works best with windows Live writer. Blogger Editor is simply annoying and this trick simply just don’t work efficiently with it. If you still want to use blogger editor rather than windows live writer than frustration is what you will encounter! “

I added </span> to the part where the entire post completes or source code ends



In short add <span class="fullpost"> just before the text to be hidden and add </span> just after it


That’s All!





You can use some of the Images below instead of that Read More –>> text

 read-more with a black outline simple readmore text image read-more with a blue drop shadow read more text with black drop shadowread-more black and orange

To add an image instead of text simply replace Read More ->> in the code above with this,


<img border="0" alt="read more" src="URL Of Your Image"/>

Replace URL Of Your Image with your image link.




Update:-

I have created some high quality Read More Buttons, may be you will like them more. Visit these links,


If you want to learn how to add  these images instead of that Read More->> text, then let me know so that I could write a new post on that. And believe me adding an image instead of a text is extremely easy.

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Learn How To Show Post Summary using The “Read More Link” or “Continue Reading link”
Learn How To Show Post Summary using The “Read More Link” or “Continue Reading link”
http://lh3.ggpht.com/_7wsQzULWIwo/ShhRguQ4jWI/AAAAAAAABUU/uu32GRElPqo/readmore%5B18%5D.jpg?imgmax=800
http://lh3.ggpht.com/_7wsQzULWIwo/ShhRguQ4jWI/AAAAAAAABUU/uu32GRElPqo/s72-c/readmore%5B18%5D.jpg?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2009/05/learn-how-to-show-post-summary-using.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2009/05/learn-how-to-show-post-summary-using.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy