« Increase web site income - Sell Ad space on your Blog - set n forget hands-free System to serve AD packages on your blog »

Add a Teaser or Read-More Tag to a Blog

How to add a “Teaser” or “Read More” tag to a Blog to shorten your Posts:

By popular request, here are the instructions to add a “Teaser” Tag or “Read More” prompt, and shorten each Post on the home page of your Blog.

This allows your visitors to choose the Post they need to read, rather than having them lose interest and leave if they have to scan through long posts one after the other on the Home Page of your Blog.

Here’s the HTML you add to your Blogger template to add a Teaser or Read More tag.

[by the way, Blogger also gives you clear instructions how to do this in their comprehensive Help section]:

1. Open up your “Template” in the Blogger Dashboard.

2. In the Template source code, immediately after the final bit of CSS coding which should be similar to that shown below:

#footer p {
margin:0;
padding-top:15px;
font:58%/1.6em "Trebuchet MS",Trebuchet,Verdana;
text-transform:none;
letter-spacing:.1em;
}

add the following block of Code:

 [MainorArchivePage]


    span.fullpost {display:none;}

 [/MainorArchivePage]


 [ItemPage]
   span.fullpost {display:inline;}

 [/ItemPage]


 [/style]   

**The last closing [/style] tag should already be present in your code.

To make the instruction perfectly clear: the above block of code should be added before the “haloscan” script declaration - that is if you have “haloscan” commenting/trackback added to your Blog. If not, the block of code should be before the closing [/head] tag - exmples of both shown below and please note: the following two lines are only examples of what should already be present in your template.

script type text/javascript" src="http://www.haloscan.com/load/mdcom/"[/script]

[/head]

3. NOW COMES THE FUN PART - or the repetitive part … in every single post you do from now on in which you want to specify exactly where the Post gets split .. so your subscribers are enticed into pressing the “READ MORE” prompt and … again, whilst in the “Edit HTML” mode …

… add the following span fullpost tag immediately after the word you want to abbreviate the post at [leaving no space .. also, remember this will not work in "Compose" mode)

[span class="fullpost"]

and close the span tag right at the very end of all the HTML for the body of your article, immediately after the very last sentence of text as follows:

[/span]

4. IMPORTANT: The closing span tag should be exactly after your last Technorati Tag (that’s if you use wisely use Technorati Tags, or the closing tag should be at the very end of the last sentence of your Post’s closing paragraph)

Please remember the above referenced

[span class="fullpost"][/span]

tags have to be inserted in the actual HTML coding in the “Edit HTML” section of your dashboard - in each and every single Post that you want to shorten and include the Teaser or Read More prompt.

IMPORTANT: do change the [ ] brackets to the correct in all the code you add, as is a pre-requesite of the HTML language.

Also - please note you can do this in “one shot” or a far easier manner if you don’t want to have to manually add the ’span’ tag to the HTML of every single Post you write.

That declaration is also avalable in the HELP section at Blogger and supplies the code for a tag that will split every Post you do automatically, without the manual insertion of the span tag.

I simply prefer to have “manual” control of “precisely” where the Teaser tag is added to the long Posts in my Blog,

If you are unsure how to apply the Teaser or Read More code to your Blogger blog, or my instructions are unclear, please shoot off an email and I will be happy to help.

Technorati Tags: , ,

Categories: Blog
Tags:

Leave a Reply

You can use these XHTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <em> <strong>