Monday, October 23, 2006

How to "Continue reading here..."

For the past few weeks, I've been looking for a tweak on Blogger to put a "Continue Reading here" on the main page and archive page, forcing the reader to go to the permalink pages where your advertisement are more relevant. I can't find a decent tutorial on the net, but I did find some Blogger blogs with such kind of functionality. What I did was to study their techniques (by reading the source code! hehehe) until I finally figured out how they did it.

Now, I am going to share it with you. ;) There are 4 steps to follow in editing the template and 1 step when posting. But before you do anything, back up your original template, ok?

Template changes.

1. Copy and paste this code on the CSS declarations. That is between the <style></style> tags.

<style>

....
...

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>

</style>


2. Copy and paste this code just after the style closing tag (</style>):

</style>
<script type="text/javascript">
var memory = 0;
var number = 0;
</script>


3. Copy and paste this code just after the <$BlogItemBody$> tag.

<$BlogItemBody$>
<MainOrArchivePage>
<script type="text/javascript">
spans = document.getElementsByTagName('span');
number = 0;
for(i=0; i < spans.length; i++){
var c = " " + spans[i].className + " ";
if (c.indexOf("fullpost") != -1)
number++;
}
if(number != memory){
document.write('<br /><a href="<$BlogItemPermalinkUrl$>" title="permanent link">Continue reading "<$BlogItemTitle$>" here...</a>');
}
memory = number;
</script>
</MainOrArchivePage>

4. Republish your blog.

Now, after republishing your blog, it is now set for Continue Reading Here kind of post. All you have to do now is to edit your post to mark which part of your post to be hidden. Here is how to do it.

Open a blog post in Edit HTML mode. To mark the part that you want to hide, simply put those part between <span class="fullpost"> </span> tags.

Example:

Example Post

This is an example post. This one is displayed on the main and archive page. <span class="fullpost">This part of the post is hidden and can be viewed only on the permalink page.</span>


This is how the post will look like on the main or archive page:

Example Post

This is an example post. This one is displayed on the main and archive page.

Continue reading "Example Post" here...


The permalink page will contain the full post. For comments and suggestions, don't hesitate to contact me ;)

That's all!

11 comments:

Seamus "Moose" Anthony said...

hey great blog and thanks for the tips! Can I ask how to get that amazon ad to the left there? I tried it on my blog but it just keeps pushing the rest of the content down south! I want it to float top left. if you look at my blog you'll see what i mean (it is currently black where i want to place amazon ad) http://thecontemporarytaoist.blogspot.com

cathcath said...

your tips are very helpful. just have a problem with the "continue reading'. it works only in one post in the main page.

Anonymous said...

I'm testing this comment for this video of mine >> David Blaine Hilarious Spoof

Jepoy said...

this tweak is within the Blogger Help database ;)

Jepoy said...

here's the actual help page

l3utterfish said...

with this hack.. the "continue reading" appears in everypost? or just in the ones you want?

kukote said...

@jepoy... thanks for the info

@l3utterfish... the continue reading here link will only show on the post that you want.

Juicy said...

For some reason it's not showing up in the post section. I'm still seeing the entire article on the first post. Please help

email: juicynewsblog@gmail.com

Thank you

Edren's - Daily Virtual Diary ® [E-DVD®] said...

I dont get you on the 2nd step.

Where should i paste this as i cant find <$BlogItemBody$> tag?

Thanks

dghnfgj said...

There was once upon [url=http://www.buy-wow-gold.fr]wow gold[/url] a time a poor woman who had [url=http://www.wowgoldvip.co.uk]wow gold[/url] one little daughter called 'Parsley.'[url=http://www.wotlkleveling.co.uk/offer-uk-wow-lvl.asp]wow Power Leveling[/url] She was so called because [url=http://www.wotlkleveling.co.uk/offer-uk-wow-lvl.asp]wow PowerLeveling[/url] she liked eating parsley better [url=http://www.wow-power-leveling.es]WOW power leveling[/url] than any other food,[url=http://www.wowpl.es/wowleveling.asp]WOW powerleveling[/url] indeed she would hardly eat anything else.[url=http://www.gamcc.com/Archlord-Online/]archlord gold[/url] Her poor mother hadn't enough [url=http://www.archlord-gold.com]archlord gold[/url] money always to be buying parsley for her

Чингүндорж said...

Where should i paste this as i cant find <$BlogItemBody$> tag?
please help!

Monday, October 23, 2006

How to "Continue reading here..."

For the past few weeks, I've been looking for a tweak on Blogger to put a "Continue Reading here" on the main page and archive page, forcing the reader to go to the permalink pages where your advertisement are more relevant. I can't find a decent tutorial on the net, but I did find some Blogger blogs with such kind of functionality. What I did was to study their techniques (by reading the source code! hehehe) until I finally figured out how they did it.

Now, I am going to share it with you. ;) There are 4 steps to follow in editing the template and 1 step when posting. But before you do anything, back up your original template, ok?

Template changes.

1. Copy and paste this code on the CSS declarations. That is between the <style></style> tags.

<style>

....
...

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>

</style>


2. Copy and paste this code just after the style closing tag (</style>):

</style>
<script type="text/javascript">
var memory = 0;
var number = 0;
</script>


3. Copy and paste this code just after the <$BlogItemBody$> tag.

<$BlogItemBody$>
<MainOrArchivePage>
<script type="text/javascript">
spans = document.getElementsByTagName('span');
number = 0;
for(i=0; i < spans.length; i++){
var c = " " + spans[i].className + " ";
if (c.indexOf("fullpost") != -1)
number++;
}
if(number != memory){
document.write('<br /><a href="<$BlogItemPermalinkUrl$>" title="permanent link">Continue reading "<$BlogItemTitle$>" here...</a>');
}
memory = number;
</script>
</MainOrArchivePage>

4. Republish your blog.

Now, after republishing your blog, it is now set for Continue Reading Here kind of post. All you have to do now is to edit your post to mark which part of your post to be hidden. Here is how to do it.

Open a blog post in Edit HTML mode. To mark the part that you want to hide, simply put those part between <span class="fullpost"> </span> tags.

Example:

Example Post

This is an example post. This one is displayed on the main and archive page. <span class="fullpost">This part of the post is hidden and can be viewed only on the permalink page.</span>


This is how the post will look like on the main or archive page:

Example Post

This is an example post. This one is displayed on the main and archive page.

Continue reading "Example Post" here...


The permalink page will contain the full post. For comments and suggestions, don't hesitate to contact me ;)

That's all!

11 comments:

Seamus "Moose" Anthony said...

hey great blog and thanks for the tips! Can I ask how to get that amazon ad to the left there? I tried it on my blog but it just keeps pushing the rest of the content down south! I want it to float top left. if you look at my blog you'll see what i mean (it is currently black where i want to place amazon ad) http://thecontemporarytaoist.blogspot.com

cathcath said...

your tips are very helpful. just have a problem with the "continue reading'. it works only in one post in the main page.

Anonymous said...

I'm testing this comment for this video of mine >> David Blaine Hilarious Spoof

Jepoy said...

this tweak is within the Blogger Help database ;)

Jepoy said...

here's the actual help page

l3utterfish said...

with this hack.. the "continue reading" appears in everypost? or just in the ones you want?

kukote said...

@jepoy... thanks for the info

@l3utterfish... the continue reading here link will only show on the post that you want.

Juicy said...

For some reason it's not showing up in the post section. I'm still seeing the entire article on the first post. Please help

email: juicynewsblog@gmail.com

Thank you

Edren's - Daily Virtual Diary ® [E-DVD®] said...

I dont get you on the 2nd step.

Where should i paste this as i cant find <$BlogItemBody$> tag?

Thanks

dghnfgj said...

There was once upon [url=http://www.buy-wow-gold.fr]wow gold[/url] a time a poor woman who had [url=http://www.wowgoldvip.co.uk]wow gold[/url] one little daughter called 'Parsley.'[url=http://www.wotlkleveling.co.uk/offer-uk-wow-lvl.asp]wow Power Leveling[/url] She was so called because [url=http://www.wotlkleveling.co.uk/offer-uk-wow-lvl.asp]wow PowerLeveling[/url] she liked eating parsley better [url=http://www.wow-power-leveling.es]WOW power leveling[/url] than any other food,[url=http://www.wowpl.es/wowleveling.asp]WOW powerleveling[/url] indeed she would hardly eat anything else.[url=http://www.gamcc.com/Archlord-Online/]archlord gold[/url] Her poor mother hadn't enough [url=http://www.archlord-gold.com]archlord gold[/url] money always to be buying parsley for her

Чингүндорж said...

Where should i paste this as i cant find <$BlogItemBody$> tag?
please help!