Posts and Pages can be divided into parts with page-breaks

➕ BASIC FEATURES

Posts and Pages can be divided into parts with page-breaks.

🎞𐏀

Navigation captions can be edited.


Slides counter can be displayed.


Custom HTML and CSS can be added above and below post slides.


How to Install split-blogger-post on a Blogger template.

Installing split-blogger-post on your Blogger website is simple! In this article, we will walk you through each step. If you prefer visual instructions, check out our video tutorial below:

split-blogger-post is compatible with almost all blogger templates and it can be implemented in easy ways. For user friendliness, this solution code come up with a button “Split Page '' ” and easy usage within the text editor. It is light weight and comparatively optimized so it will not interrupt your scripts uselessly.

...

These are Following Steps:


Add CSS code to your template

Go to Blogger Theme and Click the Edit HTML Button.


Click around the Code and Press Ctrl+F and Search for: ]]></b:skin>


then paste the code in the style.css file above: ]]></b:skin>


click the Save Template button.


Add html code to your template

Go to Blogger Theme and Click the Edit HTML Button.


Click around the Code and Press Ctrl+F and Search for: <data:post.body/>


In the most blogger templates, this tag exists at least twice, or more than once. But how can we find the right tag that we need.


If you have multiple <data:post.body/> in your template then, before each of those <data:post.body/> tag write this <h1>First place</h1> , here ‘First’ is for the first <data:post.body/> , write ‘Second’ for the second <data:post.body/> and so on. Now save your template.


After saving is complete, go to your blog and notice which <h1 /> tag is appearing before your post body. If ‘First’ is appearing then the first <data:post.body/> is the actual <data:post.body/> .


That’s it, you just debugged your code to find out which <data:post.body/> is the actual one working. Now go back to your template code editor and again find all those <data:post.body/> and remove the <h1></h1> tag you added to debug, but only before the actual <data:post.body/> , write something like <!– POST BODY HERE –> , a comment, so that to use it the next step.


Remove the tag <data:post.body/> and replace it with the code in the body.html file.

Just don’t forget to remove all the <h1></h1> tags you used for debugging.


Add the javascripte code to your template

Click around the Code and Press Ctrl+F and Search for the close tag </body>.


Paste the code in the script.js file just befor the closing tag </body>.

0