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.
Demo : https://nextprev-preview.blogspot.com/2018/11/test-post.html
-
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.
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:
...
These are Following Steps:
-
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.
-
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.
-
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>
.