Notification texts go here Contact Us Buy Now!

How to Add Numbered Pagination in Your Blogger Blog-Box

 How to Add Numbered Pagination in Blogger?

1.The firest thing you need to do is to login into your Google account. 

2.Once logged in go to Blogger Dashboard

 >> Template >> Edit HTML and search for the Skin tag ]]></b:skin>

3.After finding the skin tag, just above it paste the following piece of coding.




.showpageNum a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
float: left;
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}

Now once the style sheet is added to your template,
it is the time to add the JavaScript coding 
that would turn the ordinary looking order/newer post buttons into a robust and user-friendly 
numeric pagination. Search for the ending </body> 
tag and just above it paste the following JavaScript coding. 
Once everything is done press “Save Template
button located on the top right corner of your screen.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://templateism.com/js/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->


Congratulations: You have successfully added numbered pagination in blogger. Now go and check out the interactive preview to see the amazing navigation in action. With a little modification is CSS, anyone can customize to give it the desire touch that he needs.

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.