How to Create "Read More..." Link in Blogger Posts
No HTML Way to Create Expandable Posts
Want to know how to shorten a Blogger post? Make an expandable link to view more? Or read more here...? If you are using the New version of Blogger, than you may be interested in this! This is an easy, no HTML way of making expandable blog posts in Blogger.
I have seen many blogs on Blogger by Google with the 'read more here' , 'view more' or 'continue reading article here' link to the full version of the post. I scoured the web for "expandable links Blogger", "expandable post codes Blogger" and the even more confusing "expandable post script Blogger". I found codes alright. Did they work? Well, I am writing this so, the answer is no.
When I post an article I have written on my Blogger Blog I don't want to post a short version of my article, I want post the whole thing! The full text version if you will. Most of the articles I post on my Blogger blog are pretty lengthy, packed with tips and info. Unless it is a job posting, those are pretty short posts. Should I sacrifice content, for easy readability? Sure it would be great if I could say everything I wanted to in one paragraph, but I don't work that way. What is a girl to do?
For the life of me I tried to figure this out. I can figure out simple HTML. I played around with a few Blogger layouts. I add new content all the time. (At least I try to.) I post almost daily. In viewing my page as a whole, I noticed my posts seemed to be too long. How can I shorten a Blogger post? I found an abundance of codes. I tried to copy and paste the expandable link codes I found. Why is this view more option so difficult? This whole read more here full post code thing really made my head whirl. After I embedded the Blogger codes and followed all the instructions, exactly as they were written, somehow something always got messed up! I had just about given up on trying to shorten my posts. Nothing worked. Sometimes, it appeared to work, and then the code between these symbols >, that looks like /span ...would just cut my whole layout short. That particular code was to be put in the actual post, not the HTML view option.So I still do not understand how the whole entire Blogger blog page got cut short! I am no HTML whiz. (Needless to say) So being the practical gal that I am, I came across a fool proof way to create the view more link in Blogger without using HTML of CSS codes.
These instructions are for the Google blog, the New Blogger to be precise. I don't know if this would work on other blogs, but I hear some have the 'option' offered anyway. Blogger does not at this time. This is how you shorten a Blogger post and use a view more feature. (The handmade way!)
1: Under Settings, on the Archives tab, make sure you have chosen, Enable Post Pages. Click YES.
2. Create your post. The whole text or article in FULL that you want to be the linked-to page.
3. Next give it a date, a 'fake' date. For example, I date it for February 2nd , when it is really March 2nd. Once you have done this save it.
4. Click View Post, when you are done. On that page, your full article will appear. COPY the address. That is found in your address bar it will say http:// followed by the archived address of your blog post.
5. Create a new post. On this one, you write in the lead to the full article post; it could be a paragraph or two, an introduction, or a snippet of your full article. Then at the bottom, type the text that you want to make a click-able link. Something like, read more here, continue reading here, full article , read more, view more, whatever you want it to say! Then using the link button, paste the http: address of the FULL article you already posted. Then publish your post.
So long story short, just as I was about to throw in the towel, I figured out how to shorten a Blogger post. It may not be the 'cool' way to do it. But hey, it works!
Check out my blog to see examples of how this works!
This article is from http://www.associatedcontent.com/article/214831/how_to_create_read_more_link_in_blogger.html?cat=59 By Joyann, published Apr 24, 2007 at ttp://www.associatedcontent.com, its another crazy tricks to make expandable posting on blogger. You can do thats but it takes more times, and maybe you forget where is the story, when the date i choose.
From Amanda at http://www.bloggerbuster.com, she has a great tutorial for new xml blogger template to create expandable posting, or Read more...links, or Continue reading... links, below the Amanda tutorial from BloggerBuster.com. With subject is
Elegant Post Summaries for Blogger with jQuery on September 04, 2008
The ability to display extracts of posts is a feature which many of us would love to see added to Blogger! Such a feature would prevent readers having to scroll far down the page to find the next post on home and archive pages, and in many cases, could offer the potential for different styles of layout...
Many Blogger users have adopted Ramani's selective expandable posts hack or a similar alternative. However, I have found these to be a little complicated: they require manual editing of each post or cause other irritating problems. In my search for an elegant and less cumbersome alternative, I have discovered an almost perfect solution: the jQuery Expander Plugin by Karl Swedberg.
Integrating the jQuery Expander plugin for Blogger offers many useful options and features:
Depending on the style of post summaries you would prefer to display, the method for installation will be slightly different.
I'll begin with a default explanation which will summarize posts with a link to expand in the same page (this requires only two steps). Next we can make two small changes which prevent expansion and add a link to the post page.
Finally I'll explain how you can alter some options for extracts which can be applied to both methods.
For whichever function you prefer, the installation is simple and the result will be elegant post summaries for your Blogger powered blog :)
This is the simplest method to add excerpt functionality to your blogger powered blog!
Firstly, go to Layout>Edit HTML in your Blogger dashboard and check the "expand widget templates" box.
Then, find the closing
Next, find this section of code (or similar) in your template:
If you cannot easily find this section, search for the following tag using your browser's search function:
You need to highlight this and any surrounding code, as in this screenshot:
Replace this section of code with the following instead:
Now preview your template. You should now notice that posts on your home page have been summarized and feature an ellipsis at the point of truncation which (once viewed in the live page) is a link to expand/truncate the post:
If you're happy with this, you can save your template and enjoy using your new post summaries right away. Alternatively, read on for methods of preventing the expansion in the same page, and customizing the excerpts to suit your preferences.
My personal preference is to display only an excerpt of posts with a link to the full article. This requires only two small changes to the default installation:
1. Find this line in the <head> section of your template:
And replace it with this instead:
I have highlighted the different file name in bold red so you can see the change at a glance.
2. Next, find the code you have added around the <data:post.body/> section, and add the line in bold red, as shown below:
Now preview your template. The "linked" ellipsis should now be replaced with a plain one, and you should see the "Continue reading" link appear beneath the extract. You could change the link text to anything you prefer (eg: "Read more", "Full Post", etc). Then proceed to save your template.
Both plugins therefore have identical options which you can set by adding or changing code in your blog template.
The options can be configured within the internal javascript in the head section which by default appears like this:
Here are some of the most used options available, and how they can be changed. A full list of options can be found on the expander plugin for jQuery page.
You can add or change any of the lines above as appropriate for your needs.
The Expander Plugin for jQuery was created by Karl Swedberg and is dual licensed under the MIT and GPL licenses.
If you would prefer to host the jQuery scripts on your own server, you can download a zipped folder including all scripts from this tutorial and a basic Minima template in which this function has been added for demonstration or testing purposes. As in the case of the original Expander Plugin and jQuery file, these are provided under the GPL licence.
Download Elegant Blogger Post Summaries Files
I hope you have found this tutorial to be a useful and elegant solution for creating and using post summaries for your Blogger template. Please feel free to leave your comments and any suggestions for improvement below.
Want to know how to shorten a Blogger post? Make an expandable link to view more? Or read more here...? If you are using the New version of Blogger, than you may be interested in this! This is an easy, no HTML way of making expandable blog posts in Blogger.
I have seen many blogs on Blogger by Google with the 'read more here' , 'view more' or 'continue reading article here' link to the full version of the post. I scoured the web for "expandable links Blogger", "expandable post codes Blogger" and the even more confusing "expandable post script Blogger". I found codes alright. Did they work? Well, I am writing this so, the answer is no.
When I post an article I have written on my Blogger Blog I don't want to post a short version of my article, I want post the whole thing! The full text version if you will. Most of the articles I post on my Blogger blog are pretty lengthy, packed with tips and info. Unless it is a job posting, those are pretty short posts. Should I sacrifice content, for easy readability? Sure it would be great if I could say everything I wanted to in one paragraph, but I don't work that way. What is a girl to do?
For the life of me I tried to figure this out. I can figure out simple HTML. I played around with a few Blogger layouts. I add new content all the time. (At least I try to.) I post almost daily. In viewing my page as a whole, I noticed my posts seemed to be too long. How can I shorten a Blogger post? I found an abundance of codes. I tried to copy and paste the expandable link codes I found. Why is this view more option so difficult? This whole read more here full post code thing really made my head whirl. After I embedded the Blogger codes and followed all the instructions, exactly as they were written, somehow something always got messed up! I had just about given up on trying to shorten my posts. Nothing worked. Sometimes, it appeared to work, and then the code between these symbols >, that looks like /span ...would just cut my whole layout short. That particular code was to be put in the actual post, not the HTML view option.So I still do not understand how the whole entire Blogger blog page got cut short! I am no HTML whiz. (Needless to say) So being the practical gal that I am, I came across a fool proof way to create the view more link in Blogger without using HTML of CSS codes.
These instructions are for the Google blog, the New Blogger to be precise. I don't know if this would work on other blogs, but I hear some have the 'option' offered anyway. Blogger does not at this time. This is how you shorten a Blogger post and use a view more feature. (The handmade way!)
1: Under Settings, on the Archives tab, make sure you have chosen, Enable Post Pages. Click YES.
2. Create your post. The whole text or article in FULL that you want to be the linked-to page.
3. Next give it a date, a 'fake' date. For example, I date it for February 2nd , when it is really March 2nd. Once you have done this save it.
4. Click View Post, when you are done. On that page, your full article will appear. COPY the address. That is found in your address bar it will say http:// followed by the archived address of your blog post.
5. Create a new post. On this one, you write in the lead to the full article post; it could be a paragraph or two, an introduction, or a snippet of your full article. Then at the bottom, type the text that you want to make a click-able link. Something like, read more here, continue reading here, full article , read more, view more, whatever you want it to say! Then using the link button, paste the http: address of the FULL article you already posted. Then publish your post.
So long story short, just as I was about to throw in the towel, I figured out how to shorten a Blogger post. It may not be the 'cool' way to do it. But hey, it works!
Check out my blog to see examples of how this works!
This article is from http://www.associatedcontent.com/article/214831/how_to_create_read_more_link_in_blogger.html?cat=59 By Joyann, published Apr 24, 2007 at ttp://www.associatedcontent.com, its another crazy tricks to make expandable posting on blogger. You can do thats but it takes more times, and maybe you forget where is the story, when the date i choose.
From Amanda at http://www.bloggerbuster.com, she has a great tutorial for new xml blogger template to create expandable posting, or Read more...links, or Continue reading... links, below the Amanda tutorial from BloggerBuster.com. With subject is
Elegant Post Summaries for Blogger with jQuery on September 04, 2008
The ability to display extracts of posts is a feature which many of us would love to see added to Blogger! Such a feature would prevent readers having to scroll far down the page to find the next post on home and archive pages, and in many cases, could offer the potential for different styles of layout...
Many Blogger users have adopted Ramani's selective expandable posts hack or a similar alternative. However, I have found these to be a little complicated: they require manual editing of each post or cause other irritating problems. In my search for an elegant and less cumbersome alternative, I have discovered an almost perfect solution: the jQuery Expander Plugin by Karl Swedberg.
Integrating the jQuery Expander plugin for Blogger offers many useful options and features:
- It can be added easily in only two steps!
- The length (and other options) of excerpts is completely customizable within the blog template (no need to edit JavaScript files!)
- We could choose to expand posts into the same page (with a smooth transition) or add a "read full post" link to the item page instead.
- HTML tags and complete words are preserved (unlike many forms of Wordpress excerpts)
- There is no requirement for additional tags or editing of posts: it works right away after installation!
- It's possible to use different lengths of extracts for use in magazine style layouts (I'm actually working on such a project right now...)
Installation
Depending on the style of post summaries you would prefer to display, the method for installation will be slightly different.
I'll begin with a default explanation which will summarize posts with a link to expand in the same page (this requires only two steps). Next we can make two small changes which prevent expansion and add a link to the post page.
Finally I'll explain how you can alter some options for extracts which can be applied to both methods.
For whichever function you prefer, the installation is simple and the result will be elegant post summaries for your Blogger powered blog :)
Method 1: Expandable post summaries
This is the simplest method to add excerpt functionality to your blogger powered blog!
Firstly, go to Layout>Edit HTML in your Blogger dashboard and check the "expand widget templates" box.
Then, find the closing
</head> tag in your blog template, and paste the following section of code immediately before it:<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[...]', // default is 'read more...'
});
});
</script>Next, find this section of code (or similar) in your template:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>If you cannot easily find this section, search for the following tag using your browser's search function:
<data:post.body/>You need to highlight this and any surrounding code, as in this screenshot:
Replace this section of code with the following instead:
<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>Now preview your template. You should now notice that posts on your home page have been summarized and feature an ellipsis at the point of truncation which (once viewed in the live page) is a link to expand/truncate the post:
Method 2: Excerpts with a link to the post page
My personal preference is to display only an excerpt of posts with a link to the full article. This requires only two small changes to the default installation:
- Use a slightly different jQuery plugin (change the URL)
- Add a "Continue reading" link beneath the excerpts
1. Find this line in the <head> section of your template:
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>And replace it with this instead:
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>I have highlighted the different file name in bold red so you can see the change at a glance.
2. Next, find the code you have added around the <data:post.body/> section, and add the line in bold red, as shown below:
<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<a expr:href="data:post.url">Continue Reading</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if><b:else/> tag, otherwise it will not be displayed!Now preview your template. The "linked" ellipsis should now be replaced with a plain one, and you should see the "Continue reading" link appear beneath the extract. You could change the link text to anything you prefer (eg: "Read more", "Full Post", etc). Then proceed to save your template.
Post Summary Options
The jQuery plugins used for these methods are almost identical, except that the "extracts" version has the "more" link removed.Both plugins therefore have identical options which you can set by adding or changing code in your blog template.
The options can be configured within the internal javascript in the head section which by default appears like this:
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[...]', // default is 'read more...'
});
});
</script>
Here are some of the most used options available, and how they can be changed. A full list of options can be found on the expander plugin for jQuery page.
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 280, // change this to the length in characters you would like to display.
// HTML tags included in this count.
// the folllowing functions apply when choosing the expanding post version
expandEffect: 'fadeIn', // the effect used for displaying expanded text.
expandText: '[...]', // Change this from an ellipsis to "Read More" for example
userCollapseText: '[^]' // This is the icon used for truncating the post after it has been expanded.
});
});
</script>
You can add or change any of the lines above as appropriate for your needs.
License, Credits and Download
This function uses the jQuery JavaScript library and the jQuery expander plugin for the base functions.The Expander Plugin for jQuery was created by Karl Swedberg and is dual licensed under the MIT and GPL licenses.
If you would prefer to host the jQuery scripts on your own server, you can download a zipped folder including all scripts from this tutorial and a basic Minima template in which this function has been added for demonstration or testing purposes. As in the case of the original Expander Plugin and jQuery file, these are provided under the GPL licence.
Download Elegant Blogger Post Summaries Files
I hope you have found this tutorial to be a useful and elegant solution for creating and using post summaries for your Blogger template. Please feel free to leave your comments and any suggestions for improvement below.
Comments
Post a Comment