Page Navigation hack for Blogger replaces the default older posts and Newer Posts with Numbered page link just like WordPress. If you want to implement this hack in your blogger Blog then please visit this posts.
You can add this hack in two methods ,
1. By Editing Blogger template
In this Post I will tell how to add custom CSS for this Page Navigation Hack. In the Page Navigation Hack , the CSS is not so good. And i also want everyone to have their own unique CSS for Page Navigation Hack.
Let me start :
This is the CSS code of the page Navigation hack
.showpageArea {font-size: 11px; width:470px;background: url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg) no-repeat left top; padding-top:10px;padding-bottom:10px;padding-right:15px;padding-left:30px; color:#003366;text-align:left;
}
.showpageArea a {
color:#0F0;
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
color:#0F0;
border:1px solid #FFF;
margin:0 10px;
padding:0 5px 0 8px;
}
.showpageNum a:hover {
color:#FE8314;
border:1px solid #0071A5;
background-color:#FFF;
}
.showpagePoint {
color:#FE8314;
margin:0 8px 0 4px;
}
.showpage a {
text-decoration:none;
color:#FFF;
padding:0 2px 0 4px;
}
.showpage a:hover {
color:#FE8314;
text-decoration:underline;
} .showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#cc0000;
}
}
.showpageArea a {
color:#0F0;
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
color:#0F0;
border:1px solid #FFF;
margin:0 10px;
padding:0 5px 0 8px;
}
.showpageNum a:hover {
color:#FE8314;
border:1px solid #0071A5;
background-color:#FFF;
}
.showpagePoint {
color:#FE8314;
margin:0 8px 0 4px;
}
.showpage a {
text-decoration:none;
color:#FFF;
padding:0 2px 0 4px;
}
.showpage a:hover {
color:#FE8314;
text-decoration:underline;
} .showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#cc0000;
}
How to Modify this CSS code :
I am going to add a common CSS style which most of the WordPress Blogs have.
About the author /
Mohamed Rias
Popular
Editor’s Pick
-
April 30, 2023 Javascript Classes: The Definitive Guide for 2023
Explore ‘JavaScript Classes: The Definitive Guide for 2023’ to master the ins and outs of JavaScript Classes. From basics to advanced concepts, this guide empowers developers to write cleaner, more efficient code. Perfect for beginners and seasoned pros looking to level up their JavaScript game.
-
March 21, 2009 Optimization and acceleration of Windows : Disable Superfetch
If you are a gamer or an advanced user that need’s a lot of memory on your windows 7 you can get it without having to add ram to your pc by just 2 or 3 click , Disable the superfetch If you are one of the people that use the ready boost just close…
-
April 29, 2008 Hide Blogger Navigation Bar – CSS Hack
As we all know in blogger, above header there is navbar or navigation bar . Most of want to hide the navigation bar in blogger , but we don’t know how to do that. Never wonder here is a simple trick to hide the navigation bar in blogger . Follow these easy steps to paste…
-
June 8, 2012 Designing Blogger Template : Adding Meta Tags
WordPress users have many powerful plugins such as “All in one Seo” and “Yoast Seo plugin” for adding custom meta descriptions to each and every post/page. Again blogger doesn’t provide a plugin platform or custom fields support to add meta description and tags. Though these days in seo meta keywords and descriptions are given less…
-
August 17, 2012 How to install Applications using Terminal in Ubuntu?
Whenever we install a new operating system we would at first be puzzled at the strangeness of the new desktop environment. We don’t know what to do and what not to do. But when it comes to linux things get easy than a user can imagine and the problem that pops up can be rectified…
