Enhance your Blogger Site Navigation - How to Create Adaptive Page Navigation for Blogger with Custom Styling
In any site, providing an intuitive page navigation system enhances the user experience and facilitates easy access to your content.
This guide will walk you through the process of implementing a customized page navigation system using HTML and JavaScript.
Unlike the infinite scroll feature, this code snippet creates a page navigation bar with a unique design that you can easily integrate into your Blogger template. It is also Adaptive to existing code on templates that uses "Show more" button infinite load.
What is Pagination?
Pagination is a web design technique used to break down a large amount of content into smaller, more manageable sections.
In the context of blogging, pagination is often employed to organize and navigate through multiple pages of blog posts.
Benefits of Pagination:
Improved User Experience:
Pagination makes it easier for readers to navigate through your blog, especially if you have a substantial number of posts. Users can quickly jump to specific pages, enhancing overall usability.
Faster Page Loading:
Loading a limited number of posts per page reduces the initial load time, providing a more responsive and faster experience for your audience.
Enhanced SEO:
Search engines appreciate well-organized content. Paginated content allows search engines to index and rank your pages more effectively, potentially improving your blog's visibility in search results.
How to Implement Pagination in Blogger:
To implement pagination in your Blogger blog, follow these steps:
Copy the CSS Styling:
Replace your existing CSS styling with the provided styles. Adjust the styles as needed to match your blog's design.
<style type="text/css">.showpageArea a{text-decoration:underline}.showpageNum a{text-decoration:none;border:1px solid #7AA1C3;margin:0 3px;padding:3px}.showpageNum a:hover{border:1px solid #7AA1C3;background-color:#F6F6F6}.showpagePoint{color:#333;text-decoration:none;border:1px solid #7AA1C3;background:#F6F6F6;margin:0 3px;padding:3px}.showpageOf{text-decoration:none;padding:3px;margin:0 3px 0 0}.showpage a{text-decoration:none;border:1px solid #7AA1C3;padding:3px}.showpage a:hover{text-decoration:none}.showpageNum a:link,.showpage a:link{text-decoration:none;color:#7AA1C3}</style>Add JavaScript for Pagination:
Integrate the provided JavaScript code into your Blogger template. Ensure that you replace occurrences of ".space" with your top-level domain (TLD), such as ".com," ".info," ".biz," ".co," etc.
<script type="text/JavaScript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".space/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount = 2;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>Fetch JSON Data:
Include the script tag that fetches JSON data and invokes the `showpageCount` function. This function generates the pagination based on the provided JSON data.
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>
You Can Simply Add as an HTML/JavaScript Gadget on Blogger Layout.
Access your Blogger Dashboard:
Navigate to Layout:
Add a Gadget:
Choose HTML/JavaScript Gadget:
Paste the Code:
<style type="text/CSS">
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #7AA1C3;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #7AA1C3;
background-color:#F6F6F6;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #7AA1C3;
background: #F6F6F6;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #7AA1C3;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#7AA1C3;
}
</style>
<script type="text/JavaScript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".space/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount = 2;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script> Save:
Remember - Make sure the TLD in URL (.space) is Adjusted::
If your template already has a "Show More" button, don't worry; the provided pagination will seamlessly replace it. The transition will be smooth, and your readers will still be able to navigate through your content effortlessly.
Implementing pagination in your Blogger blog enhances navigation, offering a more user-friendly experience for your readers. Upgrade your blog's functionality and aesthetics with this simple yet effective pagination solution.
How this Code Works
This code is a combination of CSS and JavaScript that creates a pagination system for a blog. Let's break down the key components:
CSS:
☞︎︎︎ Defines styles for various elements related to pagination, such as underlining links, styling page numbers, hover effects, and more.
☞︎︎︎ Uses classes like `.showpageArea`, `.showpageNum`, `.showpagePoint`, and `.showpage` to style different parts of the pagination.
JavaScript:
☞︎︎︎ The `showpageCount` function is defined and is called when the JSON data (presumably from a blog feed) is loaded.
☞︎︎︎ Determines the current page based on the URL and extracts relevant information.
☞︎︎︎ Iterates through the blog posts and creates an array (`htmlMap`) containing links for each page.
☞︎︎︎ Dynamically generates HTML for pagination based on the current page, total number of posts, and specified page count and display page numbers.
☞︎︎︎ Injects the generated HTML into the document, creating a pagination bar.
Breaking down how the code works step by step:
Just check out the comments above the lines.
CSS Section:
<style type="text/CSS">
/* Styles for various elements related to pagination */
.showpageArea a {
text-decoration: underline;
}
.showpageNum a {
text-decoration: none;
border: 1px solid #7AA1C3;
margin: 0 3px;
padding: 3px;
}
/* Styles for hover effect on page numbers */
.showpageNum a:hover {
border: 1px solid #7AA1C3;
background-color: #F6F6F6;
}
/* Styles for the current page */
.showpagePoint {
color: #333;
text-decoration: none;
border: 1px solid #7AA1C3;
background: #F6F6F6;
margin: 0 3px;
padding: 3px;
}
/* Styles for "Page" text */
.showpageOf {
text-decoration: none;
padding: 3px;
margin: 0 3px 0 0;
}
/* Styles for general page links */
.showpage a {
text-decoration: none;
border: 1px solid #7AA1C3;
padding: 3px;
}
/* Remove underline on hover for general page links */
.showpage a:hover {
text-decoration: none;
}
/* Styles for link color */
.showpageNum a:link,
.showpage a:link {
text-decoration: none;
color: #7AA1C3;
}
</style>
JavaScript Section:
<script type="text/JavaScript">
// Function to handle pagination
function showpageCount(json) {
// Extract current URL and initialize variables
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length - 5, thisUrl.length) == ".space/";
var isLablePage = thisUrl.indexOf("/search/label/") != -1;
var isPage = thisUrl.indexOf("/search?updated") != -1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/") + 14, thisUrl.length) : "";
thisLable = thisLable.indexOf("?") != -1 ? thisLable.substr(0, thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum = 1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html = '';
var upPageHtml = '';
var downPageHtml = '';
// Pagination settings
var pageCount = 2;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';
// HTML for label page
var labelHtml = '<span class="showpageNum"><a href="/search/label/' + thisLable + '?&max-results=' + pageCount + '">';
// Loop through each blog post in the JSON data
for (var i = 0, post; post = json.feed.entry[i]; i++) {
// Extract timestamp and title
var timestamp = post.published.$t.substr(0, 10);
var title = post.title.$t;
// Check if it's a labeled page
if (isLablePage) {
if (title != '') {
// Check if the post has the specified label
if (post.category) {
for (var c = 0, post_category; post_category = post.category[c]; c++) {
if (encodeURIComponent(post_category.term) == thisLable) {
if (itemCount == 0 || (itemCount % pageCount == (pageCount - 1))) {
// Check if the post is on the current page
if (thisUrl.indexOf(timestamp) != -1) {
thisNum = postNum;
}
postNum++;
// Store link for the page
htmlMap[htmlMap.length] = '/search/label/' + thisLable + '?updated-max=' + timestamp + 'T00%3A00%3A00%2B08%3A00&max-results=' + pageCount;
}
}
}
} // end if(post.category){
itemCount++;
}
} else {
if (title != '') {
if (itemCount == 0 || (itemCount % pageCount == (pageCount - 1))) {
if (thisUrl.indexOf(timestamp) != -1) {
thisNum = postNum;
}
if (title != '') postNum++;
// Store link for the page
htmlMap[htmlMap.length] = '/search?updated-max=' + timestamp + 'T00%3A00%3A00%2B08%3A00&max-results=' + pageCount;
}
}
itemCount++;
}
} // end for loop
// Generate HTML for pagination
for (var p = 0; p < htmlMap.length; p++) {
if (p >= (thisNum - displayPageNum - 1) && p < (thisNum + displayPageNum)) {
if (fFlag == 0 && p == thisNum - 2) {
if (thisNum == 2) {
if (isLablePage) {
upPageHtml = labelHtml + upPageWord + '</a></span>';
} else {
upPageHtml = '<span class="showpage"><a href="/">' + upPageWord + '</a></span>';
}
} else {
upPageHtml = '<span class="showpage"><a href="' + htmlMap[p] + '">' + upPageWord + '</a></span>';
}
fFlag++;
}
if (p == (thisNum - 1)) {
html += '<span class="showpagePoint">' + thisNum + '</span>';
} else {
if (p == 0) {
if (isLablePage) {
html = labelHtml + '1</a></span>';
} else {
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
} else {
html += '<span class="showpageNum"><a href="' + htmlMap[p] + '">' + (p + 1) + '</a></span>';
}
}
if (eFlag == 0 && p == thisNum) {
downPageHtml = '<span class="showpage"> <a href="' + htmlMap[p] + '">' + downPageWord + '</a></span>';
eFlag++;
}
} // end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
} // end for loop
// Handle the case when the current page is not the first page
if (thisNum > 1) {
if (!isLablePage
Overall:
⌨︎ This code essentially creates a customized pagination system for a blog, allowing users to navigate through pages of posts.
⌨︎ It dynamically generates links based on the blog's URL structure and the number of posts available.
⌨︎ The pagination includes "Previous" and "Next" links, along with page numbers, and adjusts based on the current page and total number of posts.
Note:
This script relies on the Blogger API to fetch post data in JSON format. Ensure that the API is accessible and returns the expected data for this script to work correctly.
By incorporating this customized page navigation into your Blogger template, you not only improve the user experience but also add a visually appealing element to your blog.
Feel free to tweak the CSS styles to match your blog's design, providing a seamless and engaging navigation experience for your readers.
Update:
I was scrolling around the web today and Stumbled upon some Styles for this script/plugin. Not yet Tested but I checked the class and ID and I'm sure it would work om most blogger blogs. ✅ The styles were sourced from blogger archive
✔︎ Just head fo your Blogger blog "Template section"
✔︎ Click on "Edit HTML" press ctrl+f to search for "]]></b:skin>"
✔︎ You can paste Any of these CSS there
Note: Pick Only One. You can as well leave or remove the Css above ☝🏾☝🏾 from your template.
Style 1
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}Style 2
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;} Style 3
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}Style 4
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}Style 5
#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}Style 6
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}Style 7
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}
