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


A blogger and Web Developer currently in college learning about computers. A CSS Lover , Blogger Template Designer and Music Addict ! Get more from Prayag on and Twitter




Want to get these Updates straight to your Inbox , Then Subscribe !




Related Articles


22 comments:

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

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

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

    ReplyDelete
  4. 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.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

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

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

    ReplyDelete
  8. 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. :)

    ReplyDelete
  9. 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.

    ReplyDelete
  10. 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

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

    ReplyDelete
  12. 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!!!

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

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

    need password and use
    Helf me!

    ReplyDelete
  14. 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 !

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

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

    ReplyDelete