Saturday, December 6, 2008

How To: Blogger Expandable Post "Yet Again"

Blogger or Blogspot Expandable post, yes I know there are tons of sites that have How To's for this but for some reason I had to use no less than three (3) of those sites and compile their information to create something that would (A.) work for me, and (B.) do things the way I wanted them done.

If for some reason you don't know what expandable post is .. it is the teaser first paragraph with a read more link that will take you to the rest of the article.

I am using a modified layout and I don't know if this will work for every one (classic templates, or beta) so use at your own risk.

The best help so far was from blog.techdreams.org but I still could not get the size of READ MORE that I wanted. The reason I want it bigger is due to some of the feed back I have received, "Great information on your site, but your articles are really short and leave you hanging" well thats because they are only reading the teaser, and not the full post. And I can verify this with the tracking metrics I use showing only first page read .. and a very high bounce rate from the front page.

Ok nuf ranting. Here is how I have done this and how it works for me and for the advanced users ummm.. sorry going step by step for all folks:

Go to your blogger Dashboard

Find the Blog you want to edit and click on Layout

Once there click on Edit HTML

****Warning, Warning, DANGER Will Robinson*****

SAVE YOUR TEMPLATE be for you do any editing so that if something does not work right you can always upload the old one and you are back in biz.

Find this bit of code ]]></b:skin> in your template HTML and paste the following piece of code in between ]]></b:skin> and </head>

Now this sounds difficult to non-html (web geeks that know all of this stuff I'm not one of them yet) but its easy if you use exploder .. umm mean Explorer click on the Edit drop down and find on this page or press the ctrl button and <crtl> +f this will bring up a search box or a search down at the bottom of the page.

type in the search it should take you directly to where you want to insert your code.

Go to the beginning of </head> and press return to make some space to work

copy this code and paste it in to the space you just made

<!-- Style to implement "Read more on this Article" link in all the posts (Start) -->
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
<!-- Style to implement "Read more on this Article" link in all the posts (End) -->

Ok what this did is defined a class for the Read more link

Save your template.

Now Click on the Expand Widgets Template checkbox at the top right.

Using your search box find <data:post.body/>

copy and past this bit of code imediately after the <data:post.body/>

<!-- Code to show "Read more on this article..." Link (Begin) -->
<b:if cond='data:blog.pageType != "item"'>
<span>
<a expr:href='data:post.url' style='color:#0000FF; text-align:right; font-weight:bold; font-size:140%; text-decoration:none' >Read more on this article...</a>
</span>
</b:if>
<!-- Code to show "Read more on this article..." Link (End) -->

Ok what this did is defined a class for the Read more link
with a color of blue thats what color:0000FF defines
text will align right
font will be bold
font size will be 40 times bigger than the normal text in the blog

Save the template ...

If you get errors
XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “cond”.

This is why I created this article cause after 5 tries getting that error I had to search more sites.. Like I said it might not work for all.

Ok if you were able to save with out errors the last thing you need to do is add the last bit of code to

Settings
Formatting
at the bottom of Formatting
Post Template box

paste this:

Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>

or

Hi, this is my test post.<span class="fullpost">This line is not shown in the main page</span>

now the next time you create a post where it says I, this is my test post. Here is where you put the teaser. And the rest of the post should go where it says This line is not shown in the main page.

If you have any questions shoot me a comment, Hope this helps at least one person





2 comments:

well these are some nice post.

Hi, I've put all your bloglink on mine. I dont know what to say except that I have enjoyed reading your posts. Nice blog...

Lone Star Custom Lapel Pins

Lone Star Custom Lapel Pins
Veteran Managed Lone Star Pins are creators of custom lapel pins. We offer a free digital how to PDF on our site, Free Artwork, and quote. Contact us today for your proof and quote.

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More