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:
To see how well the jQuery expander plugin could work in Blogger, take a look at this demonstration in which the posts expand into the same page.
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:
Assuming you have already added the codes from Method 1, here is what you should do:
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:
Be careful to add this in the correct place, just above the <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.
Save as PDF
My name is Amanda Fazani and I write Blogger Buster to help other Blogger users make the most of their Blogger blogs.
Post a Comment 106 Comments:
This is wonderful Amanda, I'll be trying this on one of my blogs to see how it works.
Couple of points.
1) With the "Continue Reading" option, does system load the whole post but just hide it? If not this would be a great way to speed up slow sites so that the summary is just loaded.
2) Are you sure you want to provide a link to the JS on the Amazon cloud? I'm worried that whoever is hosting this might get a nasty bill from Amazon.
Thanks again, it's a great solution.
Sorry for the double post. I have another question.
What happens if the post is "split" half way through a table? Or through "quoted" text or a span.
For example on this post : Link
How would the text in the "grey" box work? Would it be split ok? or would it leave a "hanging" div/span
Hello Dark UFO,
Don't worry about the hosting with the Amazon Cloud as I'm footing the bill! It's actually much cheaper than my previous host, and 100% more reliable! For speed, I uploaded the files to a bucket for a different project, which likely caused the confusion ;)
Unfortunately, this can only hide the post, not completely remove the extracted portion. There's still no function within Blogger to publish excerpts in this way (though I have a feeling that the team may be working on it...)
I haven't tested a post as complex as yours in any of my test blogs yet to be sure about text being truncated in the wring place (though I will attempt this shortly).
I can be sure that links, headings and images are not abruptly truncated (tried these already, which is why I settled on this script).
One solution for you may be to wrap the grey boxes in a div with the excerpt class, then choose to hide the entire grey section, leaving only the white "teaser" text. Otherwise you could choose a value which you're sure would not overlap the grey area, though for the purpose of your blog I imagine this may defeat some purpose of the teaser text.
Later I'll experiment more with my test blog to get a better overview of the implications for you, or if you prefer to experiment yourself I'd love to hear how this works for you!
Thanks Amanda, nice one and thanks for getting back to me.
I'm really hoping that Blogger implement an actual excerpt function into blogger itself.I'll have a play with this script as it looks the most powerful for now. The only downside is that it's an all or nothing approach with no way to turn it off for individual posts etc :(
Great stuff as always.
Oh and I voted for you in the Blogger awards :)
very nice! more generation from ramani's hack :)
Hi Amanda,
very quick [I hope] question for you.
What sort of extra overhead is involved in terms of blog loading times ?
Regards,
Paul
I do not believe that I preferred to postpone for months the implementation of this feature. Then when we finally decided to do it, you appear with this great tutorial two days after...
Murphy Laws :-)
[]'s
Compulsivo
Great post Amanda. Should I assume those of us using Ramani's hack need to first undo that code before we add this one. Think I will try it on my test blog first to be safe.
www.TechnicianBrian.com
Hi Amanda,
I tried on my blog of tests, but it carries the full posts and then cut. realized that in your case this not happens, has some special tip?
The test:
http://rascunhocompulsivo.blogspot.com/
Thanks,
Compulsivo
I get the < Div > tag error. Any work around?
Hi,
I got no response when i click on animated labels.
@DarkUFO: Thanks for the vote! I understand your concern about the "All or nothing" approach. You may be interested to use Ramani's selective expandable posts hack (I have used this for well over a year) though as I mentioned I have not been content with this due to the editing of each post. For me it causes extra problems whenever I need to edit a published post, especially with the new post editor! Let's keep our fingers crossed that Blogger will add this function soon :)
@iEn: Thank you for stopping by! I'm glad you like this technique.
@Paul: I have a rather fast connection to the internet so it's hard to be sure how this would affect those using dial-up. However, the script will not kick in until the rest of the page has loaded, and are hosted on a reliable server (Amazon AWS) which seems to be much more reliable to serve scripts than my original hosts.
As a guess, I would suggest it may delay loading only marginally, which for most blog readers should not affect their enjoyment of the page. jQuery based scripts are generally more lightweight than others, and certainly don't hog up as much bandwidth as Flash, Images, etc.
@TechnicianBrian: I had meant to include this issue in my post, but had such a busy day yesterday that I forgot!
Yes, I would advise removing Ramani's script first (after testing for your own needs in a test blog).
I haven't yet added this function for Blogger Buster because I still need to remove the selective expandable posts hack!
In a different test blog, I found the Elegant summary scripts to conflict with a different script (still trying to work out which). You could try adding the code to your template before saving and preview to test before saving. If there is a conflict between scripts, you would notice this on the preview.
@usariocompulsivo: The script loads only after all other elements on the page. So if you write very long posts, use images/video in your posts and such, the script will need to wait for everything else to load before it appears to work. It needs to know how much content there is before it can summarize it! Hope this helps clear things up for you :)
@SPM: Most likely you may have missed out a line when highlighting or pasting the code. The best solution is to begin again from the start, and be extra careful to see where you highlight and paste the codes.
@Suresh: Is this for your blog or mine? If it is your blog, it's likely that you're using a slightly older version of the code. I updated this to ensure labels are clickable.
This is Awesome Amnda..I never Used Ramani's Hack as it was too much complicated but yours seems to be simple n i will surely give it a try n will report about it if it works.
Hey Amanda thanks a damn lot for this, it helped me getting the jQuery into place just fine, i didnt implement the Post Expand function yet, only the main Script but thats alot since i had problems just getting it to run ANY Script. So thanks alot for the Script Cloud, its highly appreciated. If you wanna check it out i guess you know how to click my Icon, no need to tell there.
And btw thanks for your Blog alltogether, its been really helpful lately since im a Newbie to Blogspot. ill keep you in my Faves for sure.
Cheers
Hi Amanda, sorry for writing over here but it would be great if you could reply to the comments in the following topics
1)How to Generate Links to Related Posts
2)How to Add Three Columns to your Footer Section
3)Tabbed Sidebar Navigation for Recent Posts, Labels...
btw your blog is taking lot of time to load....please take a look at it
@Amanda, do you know if theres a workarround to hide the posts, until they are completely loaded? I use some kind of Css trick to do that on my tabsidebar, but cant imagine how to do that on the posts column...
[]'s
Compulsivo
Thanks for this! Lots and lots of hugs! :D
Hey Amanda, check this blog post by Peter Chen , about post summaries tricks...its much simpler than the one you have given and in it we can put the READ MORE link where ever we want in the post
http://blogger-tricks.blogspot.com/2007/01/expandible-post-summary-for-new-blogger.html
hey amanda i m back as i said above..i got in a trouble using tht hack.
I used your hack on my test blog with the same skin which i m using on my original blog.. here it is:
http://n-hhh.blogspot.com/
The problem is that the hack only works when i have set Maximum no. of Posts on main page to 1 when i increase it the blog loads for 1 sec n it gets disappear blank..i think the problem have arrived because i might have placed the 2nd step code incorrectly. plz. tell me from the text given below n add tht 2nd code:
<div class='post-header-line-1'/>
<div class='cover'>
<div class='text'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div> </div>
<div class='postmetadata'>
<p class='post-footer-line post-footer-line-1'>
thanxs amanda! i will try it
does this work with every post or can have only certain post to continue and some which are short to not continue?
Nice one amanda.
Hi Amanda;
I tried this code with my modified blog template. It didn't work. atleast the first step did not work. I done this twice, still no use. I guess there is something special about the template I use.
Thanks for the nice posts.
Ok, gracias ha sido de gran ayuda
Hi Amanda, great hack! I tried it on my test blog:
http://w-test-1.blogspot.com/
When the messages are expanded, I noticed that on many of my messages, the word "undefined" is inserted in random places, sometimes in text, sometimes before an image, I looked at a lot of them to try to determine what each one had in common, I can't find anything, why do you suppose that happened?
Thanks,
Wretha
Amanda..
I just installed the plugin in my blog... it is amazing!
anyhow, i'm using it to expand the text in the same page (since it loads it all...)
have you notice the "undefined" that replace the "read more..." link after you click it?
I'm trying to understand the code and see where i have to "define" something but can't find anything.
Thanks Amanda, I want to try, and Share this Tutorial for my friends in Indonesia.
This good hack in blogspot. I will try in my blog
yippi ... i found something great's here. Thank's Amanda ...
Yeah, I get the 'undefined' text where the 'read more' was after expansion.
What's that about?
WOW, it is Read More... http://templates-collection.blogspot.com All Design Templates Blog
Search this for long time. Now, I'm happy to see it works! http://mini-cactus.blogspot.com/
Thanks Amanda!
One thing I don't understand clearly. (I'm not really a coder) Does this automatically make expandable all past posts as well? We don't have to go back and change them? And what if we already have an expandable posts script in our code, will this override it, or do we have to go through all the motions of taking it out?
I sort of like the selective expandable posts, because I do post some things I don't want as expandable, and while this might work on one blog, I'm thinking it won't on the other.
Thanks a lot Amanda, this all works great!
This looks great. Unfortunately I get an error on my blog (blog.mmaratings.net) when I try to save the template.
I get the same error even if I just add the script. Any help?
Is there a way to apply "continue reading" to selected posts?
thank you so much for this man
I wont really get the exact result that I wanted...so bad...i applied every steps you instruced but never found anything good...
Amanda, I think Rahul still doesn't get the point, don't you think so? I love this one! :)
Hi I did everything but I couldn't minimized the text on the post. :(
@Frugal Wench: Yes it does. There is no need to edit previous posts to make them expandable :)
@Pueblo de Salinas: It would be possible, but would require manual editing of each post.
Rather than give the class "excerpt" in the template, you would need to wrap your entire post in DIV tags with the class of "excerpt" instead.
@Reavel and JayEl: Sometimes, other scripts can conflict with the jQuery used for this hack. It's possible to counteract the conflict by moving the location of scripts in the template around. If you can post the URLs of your blogs, I'll take a look at the source code to see if I can see the problem. I can't promise to make it work, as there are many different scripts which could potentially cause issues, but I'll do my best :)
Hi Amanda
I tried your script, it only works for some of the posts. For the other posts, it show [...] in between the post and then the "Continue Reading".
Please help.
http://lovelythingsinmylife.blogspot.com/
Amanda, i made a lot of tests, but couldn't find a reason why this hack dont work for me with Internet Explorer. I search your source code, but cant find the code that you show here and i see BloggerBuster sumary working well with IE... Can you tell us what your secret?
[]'s
Compulsivo
I modified the cut off point in the script so I could include pictures. It works perfectly.
Unfortunately, I have the same >undefined< problem. My blog is seanmcdevitt.blogspot.com
I seen where two or three other people had posted about getting 'undefined' when clicking on the 'read more' link. My function is working correctly, but shows 'undefined' where 'read more' shows before being clicked. Ex:
"Republican National Convention last night...read more»"
click the '...read more»' link and I get the following:
"Republican National Convention last night.undefined Sometimes they are vicious"
Anyone get this figured out yet??
thannks,.btw can you show an example blog for this??
Hi Amanda,
Thanks for you reply on my previous query, as you requested here is the link of my blog:
http://jayelsallabout.blogspot.com
I really wanted to have that hack and thanks for your extended help.
i too get the [...] in between a couple of my posts
http://gurlryder.blogspot.com
thanks!
ok, i actually figured out why there were [...] and the word undefined in my posts. looked at my posts in html view and saw that the area where they appeared where the areas where there were unnecessary codes (mine was the font code). im no programmer, this is totally new to me. but i just thought i would share that because once i deleted the codes, it worked fine.
Hi Amanda, Thank you very much for this tutorial as am already using it, but just wanted to ask. Can i use an image instead of text?
I would like to replace the "read more" with an image? is it possible?
Thanks in advance
Is there any way one could tell it to count lines instead of characters? I have html code all over my posts so i get the undefined error all over.
thanks!
hi amanda! i love the smooth expandable in yr test blog. I've tried to implement thsi into my blog but nothing happens. I've been trying to search for this tutorial in other blogs but all of it offer the "read more" tutorial instead of this style u mentioned above. I want my post to be able to expand & collaspe without going to that specific post.
Please help!
I still can't see how to fix the undefined problem when you expand posts. Any thoughts?
Hi!
I am not at all tech savvy. My template does not allow images to be put between posts. How can I put images inside the post so that readers get an idea what I am talking about.
thanks a ton!
Hi Amanda,
Thanks so much for this. I have installed this setting in my blog and it works great. I would like to control the cut to my blog though and I went to this site by Peter Chen as suggested by rahul.
http://blogger-tricks.blogspot.com/2007/01/expandible-post-summary-for-new-blogger.html
I would like to try this setting but I have already installed the jQuery Expander plugin for Blogger. Do I have to go back to my old setting to install Peter Chen's Expandable Post Summary?
btw, I have added you to my blogroll. your site is very helpful to new bloggers like me.
http://brainchildunveiled.blogspot.com/
many thanks
THank you thank you thank you... I tried several of the other "Read more" options and hated them.. this is so simle and elegant. Thank you!
Al
www.fmphotoblog.blogspot.com
www.fuzzymonkeyphotography.com
Amanda, You will not believe this. The best, easiest and fastest hack is available here
http://easyadsensevn.blogspot.com/2008/09/how-to-add-blogger-read-more-expandable_05.html
All the problems of the hack picked up by you have been taken care of including speed, pictures and content etc. It is amazing indeed.
This is awesome and exactly what I need! BUT I use a Classic Blogger template, which is not compatible w/ this code. Does anyone know if there is a way to do something similar in Classic Blogger??
Hey Amanda,
Thanks once again for this tutorial, it was worth the time spent. Your blogger tips and tricks are one of THE best. Thanks again.
hi
i used this on my blog, but when i click on
"expand", though it's working like a gem, the word "undefined" is somehow crept in at that point in the middle of all the posts.
PS.: I'm not from a English speaking nation.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "
awesome tips&tricks. you have my subscription.
I have the fix for the undefined problem (at least for me).
In your Edit Posts section, add the following to your post in HTML mode to define your cut-off:
(a class="read-more" href="#")[Expand to see the rest of the post](/a)(span class="details")
IMPORTANT: I had to change the < and > to ( and ) to post this comment. Be sure to change it back when copying to your blog post.
It eliminates undefined being added to your posts and allows you more control over the break.
I'm having trouble, this hack works for my blog on firefox, but not on Internet Explorer. Is there anything I can do to fix this?
Amanda,
In Minima template the HTML code is different than described here. The closest thing to ...div class='post-body entry-content', etc is .post-body {
margin:0 0 .75em;
line-height:1.6em;
} Is that what I'm looking for? And if so, where do I paste the new script?
Thx,
-AF
amanda: i am having trouble with the "undefined" problem as well and can't find a solution. everything works great expaninding but then the word "underfined" gets placed in b/w my words.
can you suggest a fix?
thanks so much!
kind regards,
regina
hiiiiiiiiiii
u have done great job.
thankssssssssssss
thanks Amanda, good in blogger
http://www.topsexycelebrity.com/
Mine was working fine, but then just stopped working. I was working on a new post, and all it did was show me the "[Read More]" link, but it just continued on with the post without having to click on it.
Then, all of a sudden, all of my posts copied it and now none of them are working (though they were just minutes before). I didn't make any changes to my template at all.
What happened? Could it be JQuery's fault?
@Pueblo de Salinas: It would be possible, but would require manual editing of each post.
Rather than give the class "excerpt" in the template, you would need to wrap your entire post in DIV tags with the class of "excerpt" instead.
HOW DO I DO THIS, PLEASE TEL ME.
Hi, it's working well (thanks!) but it is truncating my post by placing the [...] link on the next line, e.g.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean mauris dui, adipiscing sed, luctus ut, commodo eu, tellus. Vivamus
[...]
Then, once I click it to expand, the expanded text begins on the next line, e.g.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean mauris dui, adipiscing sed, luctus ut, commodo eu, tellus. Vivamus
quis sapien nec magna dignissim mattis. Praesent non pede sed leo luctus rhoncus. Fusce euismod.
[not sure if that displayed correctly]
I have looked at the coding and each of the .js files for < br > tags but cannot find anything.
Any advice?
Gingerella
p.s.
On the truncated posts which it has managed to place the [...] link inline, when I expand I get the word undefined where the [...] link previously was, e.g.;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean mauris dui, adipiscing sed, luctus ut, commodo eu, tellus. Vivamus undefinedquis sapien nec magna dignissim mattis. Praesent non pede sed leo luctus rhoncus. Fusce euismod.
Vinod is right !!!! his post is really great, TOTALLY recommended, look who is working even with pictures !!! http://www.mariakaran.com/
Great :)
amanda, please look at Vinod post, is a must in this awesome blog :)
Amanda, do you have anything on your site for adding a "related posts" to my blog? I would like links to related posts to appear at the bottom of each of my articles. Not tags or labels, but actual links like you have at the bottom of your posts.
Amanda - I've used the hack and it works... at least in firefox. However when the page loads in IE7 it doesn't seem to work!!
My blog is www.thinkingmanssport.co.uk.
Any ideas appreaciated.
Cheers,
Matt
Thank you! :D
Looks good...
I guess not.
仓库货架|中量A型货架 仓储货架|中量B型货架 库房货架|横梁式货架 塑料托盘|栈板 钢托盘|钢制托盘 折叠式仓储笼|仓库笼 仓储笼|仓库笼|折叠式仓储笼 托盘|钢托盘 托盘|塑料托盘 周转箱|塑料周转箱 托盘|纸托盘 料箱|钢制料箱 工具柜|工具车|抽屉柜 工作台|工作桌 刀具柜|刀具车|刀具架 手动液压托盘搬运车|电动托盘搬运车 手动液压堆高车|手动叉车 仓储笼 仓库笼 南京仓储笼 常州仓储笼 无锡仓储笼 苏州仓储笼 徐州仓储笼 南通仓储笼 镇江仓储笼 连云港仓储笼 泰州仓储笼 扬州仓储笼 盐城仓储笼 淮安仓储笼 宿迁仓储笼 轻量型货架|角钢货架 中量A型货架 中量B型货架 货位式货架 横梁式货架 阁楼式货架|钢平台 悬臂式货架 贯通式货架|通廊式货架|驶入式货架 辊轮式货架|流利条货架 压入式货架 移动式货架|密集架 模具货架 抽屉式货架 汽车4S店货架 汽配库货架 自动化立体仓库货架 托盘|钢托盘|钢制托盘 托盘|塑料托盘 托盘|塑料托盘 托盘|塑料托盘 仓储笼|仓库笼|折叠式仓储笼 手推车|铁板手推车 手推车|静音手推车 置物架|工业置物架|家用置物架 堆垛架|巧固架 挂板架|物料整理架 登高车 物流台车|载物台车 料箱|钢制料箱 搬运车|手动液压托盘搬运车|电动托盘搬运车 堆高机|堆垛机|手动堆高机|电动堆高机 叉车|电动叉车|内燃叉车|叉车厂 货架 货架 仓储货架 仓储货架 仓库货架 仓库货架 货架厂 货架厂 货架公司 货架公司 托盘 钢托盘 铁托盘 钢制托盘 塑料托盘 仓储笼 仓库笼 折叠式仓储笼 折叠仓储笼 仓储货架|仓库货架|库房货架 南京货架|横梁式货架|中型货架 钢托盘|塑料托盘|纸托盘 仓储笼|仓库笼|折叠式仓储笼 钢制料箱|工具柜|工作台 手动液压托盘搬运车|手动液压堆高车 仓库货架|中量A型货架> 仓储货架|横梁式货架|货位式货架 托盘|塑料托盘|钢制托盘|纸托盘 仓储笼|仓库笼|折叠式仓储笼|蝴蝶笼|储物笼 手动液压托盘搬运车|手动液压堆高车 仓库货架|中量A型货架 仓储货架|横梁式货架|货位式货架 托盘|塑料托盘|钢制托盘|纸托盘 仓储笼|折叠式仓储笼|仓库笼|蝴蝶笼|储物笼 手动液压托盘搬运车|手动液压堆高车 仓储货架|仓库货架|库房货架 南京货架|中型货架|横梁式货架 钢托盘|钢制托盘|塑料托盘|纸托盘 仓储笼|仓库笼|折叠式仓储笼 钢制料箱|工具柜|工作台 手动液压托盘搬运车|手动液压堆高车 仓库货架|中量A型货架 仓储货架|中量B型货架 库房货架|横梁式货架|货位式货架 钢托盘|钢制托盘|铁托盘|栈板 托盘|塑料托盘|栈板 纸托盘|栈板 仓储笼|仓库笼|折叠式仓储笼|蝴蝶笼|储物笼 钢制料箱|钢制周转箱|网格式料箱 搬运车|手动液压托盘搬运车|电动托盘搬运车 仓库货架|中量A型货架 仓储货架|中量B型货架 库房货架|横梁式货架|货位式货架 钢托盘|钢制托盘|铁托盘|栈板 塑料托盘|塑料栈板 纸托盘|栈板 仓储笼|仓库笼|折叠式仓储笼|蝴蝶笼|储物笼 钢制料箱|钢质周转箱|网格式料箱 手动液压托盘搬运车|液压搬运车 仓储货架|>仓库货架|库房货架 南京货架|中型货架|横梁式货架 钢托盘|钢制托盘|塑料托盘|纸托盘 仓储笼|仓库笼|折叠式仓储笼 钢制料箱|工具柜|工作台 手动液压托盘搬运车|手动液压堆高车 仓库货架|中量A型货架 仓储货架|中量B型货架 库房货架|横梁式货架|货位式货架 钢托盘|钢制托盘|铁托盘|栈板 塑料托盘|塑料栈板 纸托盘|栈板 仓储笼|仓库笼|折叠式仓储笼|蝴蝶笼|储物笼 钢制料箱|钢质周转箱|网格式料箱 手动液压托盘搬运车|托盘搬运车 货架|仓储货架|仓库货架|库房货架 南京货架|上海货架|北京货架 轻型货架|中型货架|搁板式货架 重型货架|横梁式货架|托盘式货架 托盘|木托盘|纸托盘|木塑托盘 托盘|钢托盘|塑料托盘|钢制托盘 仓储笼|仓库笼|折叠式仓储笼 手推车|静音手推车|铁板手推车 物料架|整理架|挂板架 料箱|钢制料箱|钢制周转箱|网格式料箱 手动液压托盘搬运车|电动托盘搬运车 手动液压堆高车|半电动堆高车|手动叉车 塑料周转箱|物流箱|塑料化工桶|塑料卡板箱 工具柜|上海工具柜|南京工具柜|抽屉柜 工作台|工作桌|南京工作台|上海工作台 刀具车|刀具柜|刀具架|刀具座 货架 货架厂 货架公司 仓储货架 仓库货架 库房货架 南京货架 上海货架 托盘 钢托盘 钢制托盘 货架|轻量型货架|角钢货架 货架|中量型货架|次重型货架 货位式货架|横梁式货架|重量型货架 仓储货架|阁楼式货架|钢平台 仓储货架|悬臂式货架 仓储货架|贯通式货架|通廊式货架|驶入式货架 仓库货架|库房货架|抽屉式货架|模具货架 仓库货架|库房货架|汽车4S店货架|汽配库货架 货架厂|货架公司|南京货架|上海货架|无锡货架|苏州货架 货架厂|货架公司|北京货架|天津货架|沈阳货架|大连货架 货架厂|货架公司|广州货架|深圳货架|杭州货架 托盘|钢托盘|钢制托盘 托盘|塑料托盘 仓储笼|仓库笼|折叠式仓储笼 置物架|多功能置物架|卫浴置物架 料箱|钢制料箱|钢制周转箱 手动液压托盘搬运车|不锈钢托盘搬运车|电动托盘搬运车 手动液压堆高车|半电动堆高车|电动堆高车|堆垛车 货架 仓储货架 仓库货架 货架厂 货架公司 托盘 钢托盘 铁托盘 钢制托盘 塑料托盘 仓储笼 仓库笼 折叠式仓储笼 折叠仓储笼 货架 货架 货架 仓储货架 仓储货架 仓储货架 仓库货架 仓库货架 货架厂 货架厂 货架公司 货架公司 托盘 钢托盘 铁托盘 钢制托盘 塑料托盘 仓储笼 仓库笼 折叠式仓储笼 货架 货架 货架 仓储货架 仓储货架 仓储货架 仓库货架 仓库货架 仓库货架 货架厂 货架厂 货架厂 货架公司 货架公司 货架公司 托盘 钢托盘 铁托盘 钢制托盘 塑料托盘 仓储笼 仓库笼 折叠式仓储笼 折叠仓储笼 托盘 塑料托盘 钢托盘 钢制托盘 铁托盘 货架厂 仓储笼 仓库笼 折叠式仓储笼 折叠仓储笼 南京货架 货架公司 货架厂 仓库货架 仓储货架 货架 货架
Hi, I've implemented your instructions but the posts aren't truncated at all. Please help.
Here's my blog http://dannea.blogspot.com/
Oh sorry, please disregard, I seem to be experiencing browser problems. Just noticed something though, if pictures are the first in the post, it gets messed up, it won't truncate and will display the full post instead. In any case, I really like what you've provided here. I've been ooking for this feature for blogger all over and I thank you very much for providing it. Keep up the good work.
Hi, Amanda.
After i follow your instruction, it work..
but, there is a 'undefined' word after i click [...]..
how can i remove the 'undefined' word??
hii.. i am not able to replace the 2nd step in method 1.As the code to be replaced in step 2 contains some more code related to the hoctro hack which i hav used "similar posts hack" by Hoctro. any solutions??
My blog is at http://avinashiitd.blogspot.com
Hi, Amanda.
I'm learning lots with you!
I'm currently using your "Halo" template for one of my blogs, and I tried to add the "Continue reading" feature you explain here, but it seems it works differently with this template in particular.
I'm guessing this happens because the post body in this template is somewhat different. I tried your codes and it resulted in a total mess. Could you help me with this? How can I use this on that template?
Thanks!
I just followed the instructions, saved it all fine but my massively long posts are still not truncated - what am I doing wrong?
Thanks
Do you think it is becuase I have my favicon code immediately before /head and I put the code above immediately before the favicon code?
Also any chance you could tell me how to get rid of the annoying purple border that springs up around my images in my sidebars? My blog theme is browns and beiges so the purple is awful and I cannot spot where it is coming from.
Thanks :-)
I'm confusing too about "undefined" word added to my post after, but i have idea to fix this, just easy way to change the [...] on:
-- expandText: '[...]', // default is 'read more...' --
on
(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.extractor.js' type='text/javascript'/)
(script type='text/javascript')
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 480, // default is 100
expandText: '[...]', // default is 'read more...'
to :
--- expandText: '', // default is 'read more...'---
and adding :
(a expr:href="data:post.url")Continue Reading(/a)
as amanda inform above.
It's working on my blog, thanks
Note: I had to change the < and > to ( and ) to post this comment. Be sure to change it back when copying to your blog post.
I have followed all instructions, and the continue reading link now shows up, but the posts are not truncated. Any ideas?
Amanda, i made a lot of tests, dont work for me with Internet Explorer. Can you tell us what your secret?
Is it possible to have this hack on the new halo 01 template. Because in this new template the second code like( post body entry content )is not similar as guided by you. So there is always an error previewing the template.
What should i do?
Hi Amanda,
This was great! But also noted that the "Continue Reading" is still appear even to short post. In addition to it, i have double of the expandable post - (1) "[....]" but was not clickable, (2) Continue Reading (Even to short post). How do i rectify this?
Tks
its not working for me i click preview also tried it saving, still didn't worked.
any suggestions?
Hi.. happy new years. use readmore not work in my blog. why? please help me.. from Blog bebas
Thanks!
Yes, it works like charm when no images put on the first line. Once I insert an image on the first line, it will show nothing except a link to read more [...]
It seems that this code seems to limit the first paragraph.
I too have the 'undefined' error. After I expand my post it says 'undefined' in place of the original expanding link.
If use
(a class="read-more" href="#")Click to read story(/a)(span class="details")
in my posts [with < and > instead of ( and )] I don't get the error any more. But I do get a few other annoying problems and defeat the point of this great plugin. Although a number of people seem to have this problem, no one seems to have figured it out.
Why oh why is undefined there? I have tried everything I can think of. I have tried every solution on this page.
BTW, Thanks for the fix SPM. Two problems; the link is already clicked when you load the page and the link shows up in my feeds.
Thanks for the code tho, seems my best bet.
I have looked around the web. I'm about to give up on jquery; it's great but that undefined error is killing me. So close to being perfect . . .
www.concisebahamasnews.com is my blog, sorry for not posting before. as you can see, this code was a big part of it.
Great tutorial and site btw. sorry for not mentioning before.
Very helpful tutorial again thank you Amanda!
I have used the jquery but at times it gives me a warning saying that the script cannot be loaded or the host server amazonaws is busy and hence cannot process your script.
Is there any substitute to this query or can I host the query on some other site viz. googlepages? If so i need the code/script! How to go about this?
Thanx Amanda for the jquery! :-)
hi Amanda, Thanks for the tutorial. I was searching for it. And it works like a charm.
The only thing that I want is that "Continue Reading" link just at the end of dots..
http://i41.tinypic.com/2v17yhf.png
Can it be done ?
Very Very Thanks Amanda.
Infomist Services
Hi Amanda,
I've been wanting to use the expandable summaries instead of the second option but it never works for any of my layouts. I checked the code and the (') signs turns into numbers. :(
I prefer that over the second option because when I edit my posts (ex: making a text bold or italic) I always have to fix it because the "/span" comes out and it ruins the summary cut. Is there a way to fix this?
There are ed hardy shirts
,pretty ed hardy shirt for men, ed hardy womens in the ed hardy online store designed by ed hardy ,many cheap ed hardy shirt ,glasses,caps,trouers ed hardy shirts on sale ,
You can go to edhardyshirts.com to have a look ,you may find one of ed hardy clothing fit for you
http://straighthairgirl.blog126.fc2.com
http://www.seriousblogging.com/crazygirlsshirts
http://www.free-blog-site.com/iammyself
http://d.hatena.ne.jp/hotfishing
chaussure pumachaussure sport chaussure nike
There are ed hardy shirts
,pretty ed hardy shirt for men, ed hardy womens in the ed hardy online store designed by ed hardy ,many cheap ed hardy shirt ,glasses,caps,trouers ed hardy shirts on sale ,
You can go to edhardyshirts.com to have a look ,you may find one of ed hardy clothing fit for you
http://straighthairgirl.blog126.fc2.com
http://www.seriousblogging.com/crazygirlsshirts
http://www.free-blog-site.com/iammyself
http://d.hatena.ne.jp/hotfishing
chaussure pumachaussure sport chaussure nike