Subscribe to "TechnoSamrat" for FREE updates on Tech News, Mobile Tips, Software Reviews & Blogging Tips
Browsing » Home » Blogger / Blogspot

Expandable Post Summary For Blogger Blogs Using JQuery

Written By Samrat| 6 June 2009| 2 Comments
Table Of Contents:

jQuery is one of the best and lightweight JavaScript library that are used in expandable post summary. This jQuery emphasizes interaction between the JavaScript and HTML.

One of best advantage of jQuery is that it is very easy to set up and also easy to edit. Blogger don’t have to fiddle with the post that is required to have Expandable Post Summary. The main disadvantage of it is that one cannot use too many gadgets because it slows the downloading of the blog.

Read More Jquery Function in Blogger Blogs

Read More Jquery Function in Blogger Blogs

What happens if there are too many gadgets is that the full posts of the blog page will initially be displayed. After all the gadgets has been downloaded, only then one can see the posts truncated to short summaries followed by a ‘Read Me’ link.

Instructions :

  • First take all the backups of current template and gadgets that has been used, incase anything goes wrong. So its better to have a backup of all things. I dont want users complaining. This is a tried and tested trick and should be no problem.
  • Then, go to LAYOUT > EDIT HTML and [v] Expand Widget Templates.
  • After the template has been expanded fully, search for </head> and then paste the undergiven script before the </head> tag.

<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: ‘[Read More…]’, // default is ‘read more…’
});

});
</script>

Blogger can change the red marked 280 to 400 or 100 in order to make the summary longer or shorter. The ‘Read More’ can also be custom written as ‘Expand Post.’

  • Next, find this:

<div class=’post-body entry-content’>
<data:post.body/>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>

  • Replace the above with this:

<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>

  • Preview the template and if satisfied then save it.

I hope you guys like it. This is quite a nice feature that can be added to your blogger blogs only and keeps the blog clean and short.



2 Comments »

  • Meenu said:

    This is an inspiring blog; I am searching for a nice web designing blog. On that time I found a wonderful blog in google it named canwebs.com. I have gone through all these posts, it’s amazing. I humbly request the blog master to update this blog when ever gets time.
    This is an ultimate web solution blog center all under one roof. Canwebs will give you all info about various web solution and related web subjects.
    This blog gives you the ultimate information about various facts in web hosting, web designing, web promotion, SEO service, PPC management, link building, service site analysis, special advice, web business setup, software development and HR solutions.

    I think you can also provide good contribution to this subject. I saw an informative guide on web developing and designing from the following URL http://www.canwebs.com
    Good Luck.

  • vivek said:

    keep it up

Leave your response!




*