Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Finally after so much search on google and other places i found how to make pages inside a blogger posts aka sub posts ....
Tips:
1.First create your post and copy html of your post in notepad application of your computer.
2.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 :(
- Create A Post > Choose HTML Option And Paste The Below Script
<div class="content11" id="page-1">
Content Of Page One
</div>
<div class="content11" id="page-2">
Content Of Page Two
</div>
<div class="content11" id="page-3">
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>
- Replace Content Of Page One/Two/Three with the HTML of your page one/two/three content.
- Now after completing above step just post this script below it
<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>
<script src="http://widcraft.googlecode.com/svn/Pages-In-Posts.js" ></script>
<script type="text/javascript">
activatables('page', ['page-1', 'page-2','page-3' ]);
</script>
- Now your post in ready to get published.....you can add more pages on your post by editing activatables('page', ['page-1', 'page-2','page-3' ]); section in last script and by adding more page option on first script.
If you liked this hack then give up credits and comment :D
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
