Making Pages Inside Blogger Posts

Pages inside Post ImageContinuing from my recent post about the Page hack in Blogger, I have been asked by some of my readers to implement the same thing inside a Post. Well some might why is it needed in the first place? , the reasoning behind that is to make your Post look a little short (Even when they are not). The method I will be employing is in no ways a clean one and will require to include a JavaScript file individually in each post followed by a full rearrangement (Just Copy-Paste) of the contents.



See Demo


How to add this into your Posts:
1. Firstly we will be adding the following JavaScript to the end of the Post ( In the Edit HTML Tab)


<script src="http://stylifyyourblog1.googlecode.com/svn/trunk/pageinpost.js" ></script>
<script type="text/javascript">
activatables('page', ['page-1', 'page-2','page-3' ]);
</script>

I am assuming that you will be making three pages namely page-1, page-2 & page-3


2. Now either add the CSS to the end of the Post or inside the Edit HTML of the Blog.


<style>
div.content11 {clear: left;padding: 1em;}
div.content11.inactive {display: none;}
ol#toc {height: 2em;list-style: none;margin: 0;padding: 0;}
ol#toc a {padding: 0px 8px 0px;margin: 1px 4px;text-decoration: none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;}
ol#toc a:hover {background-color: #DBECF8;padding: 0px 8px 0px;border:1px solid #204e73;}
ol#toc a:hover span {background-position: 100% -120px;}
ol#toc li {float: left;margin: 0 6px 0 0;}
ol#toc li a.active {background-color: #48f;background-position: 0 -60px;color: #fff;font-weight: bold;}
ol#toc li a.active span {background-position: 100% -60px;}
ol#toc span {background: url(tabs.gif) 100% 0;display: block;line-height: 2em;padding-right: 10px;}
</style> 


3. Now Here is the Basic HTML Markup in which you will have to rearrange your Post Content into content  into :


<div class="content11" id="page-1">

The content of Page One

</div>
<div class="content11" id="page-2">

The content of Page Two

</div>
<div class="content11" id="page-3">

The content of Page Three

</div>

<ol id="toc">
<li><a href="#page-1">1</a></li>
<li><a href="#page-2">2</a></li>
<li><a href="#page-3">3</a></li>
</ol>


Here you will observe that first div section is given the Id page-1, which is the link of the first item of the ordered list as well if you see the JavaScript above, you will see how it is being used.


One word of Advice, after pasting the above code (The ol list) in the Edit HTML Tab, if you go to the Compose Tab and then go back to Edit HTML tab ,you will see the links have changed in the href , if you don't revert them back to only # ones, then this will not work. So either add this code just at the end of writing your Post or don't switch to Compose tab :(


This might be a little lengthy way of achieving Pagination inside post, but the results will be better looking and a bit less lengthy posts. Thanks to Chad Guzman & Aliester for suggesting this idea. And I know this script has a lot of space for improvement.


Having problems, feel free to drop by

See Demo




Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Aakash said...

nice one!

Chad Guzman said...

Thanks for the mention Prayag. I've been looking for this for a while now. I need this to balance my sidebar and blog content length.

don't need next or read more button anymore...
keep simple...xixixiix
nice hack master ty \m/

Nirmal said...

This post is useful for certain type of articles. One more thing is I want to add blockquotes for my articles. Can you help?

I'm planning to make a lengthy post this week. I guess I should try this one rather than making it long. My readers might get bored.

sivaram said...
This comment has been removed by a blog administrator.

nice share guys

Unknown said...

It work nice but why it show a white background at my blog footer?

@OkamiS
Can you give a demo link where you have implemented it ,so that I can help you easily

Thank you SO much!

MUXLIMO said...

useful for a loooong post. sometimes we need to explain something step by step, one by one, without put the phrase "to be continue" at the bottom line. :D i think im gonna put this on my blog. Shukriya, Prayag Bhai. :)

Catharina said...

I'm having problems with changing the css in this. Would you mind noting and marking the changable stuff in the css? I've been desperate for a solution that allows me to use tabview inside a blogpost, but I need a specific design on it if im going to use it.

I will be using it as links, kinda. To show several cathegories. This far im lost with trying to understand it by myself.

EdiGirl said...

thanks it was very helpful. I was looking for it such a long time. i have implemented here
http://www.bioinformatics-made-simple.com/2012/07/how-to-analyse-protein-domain-in-given.html#page=page-1

TestLab said...

I Like the "You Might Also Like" Widget in Your Blog. Will you please tell me how to add it

Visit This

Unknown said...

real sense you great

Hi!

Great and helpful code. However, the javascript link is not available anymore, so tabs can not be implemented, Could you please upload it again?

Thanks!!!

Anonymous said...

Yes, I agree with you. When I see the demo page, some pop up window asking me about password ("Google Code Subversion Repository").

Anonymous said...

http://stylifyyourblog1.googlecode.com/svn/trunk/pageinpost.js

need password and use
Helf me!

I do not understand about your explanation, but I know what I will do. I must copy and paste your code inside my posts. Haaaahahahaha !

umesh said...

This is a very informative article about how to make pages inside blog

RazBlogs said...

nice trick dear.. it seem look like jump to content inside a page