Uncategorized

Having Custom CSS in Pagination hack

Off 58

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

2. Adding As a Widget

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;
}

How to Modify this CSS code :

I am going to add a common CSS style which most of the WordPress Blogs have.

Custom CSS style for page Navigation Hack

About the author / 

Mohamed Rias

I'm a programmer, photographer, and proud parent. With a passion for coding and a love of capturing life's moments through my camera lens, I'm always on the lookout for new challenges and opportunities to grow. As a dedicated parent, I understand the importance of balancing work and family, and I strive to be the best version of myself in all aspects of my life.

Related Posts

Popular

Editor’s Pick

  • Implementing SOLID Principles in Your React Frontend Development

    Learn how to improve the maintainability and scalability of your React frontend applications by implementing the SOLID principles. From Single Responsibility to Dependency Inversion, this article covers practical examples and best practices for writing cleaner, more modular code in your React codebase. Join us on this journey towards better frontend development with Implementing SOLID Principles in Your React Frontend Development.

  • Show only post titles in Labels page

    Hope you might have noticed that few blogger users are using custom layout for Home Page , Post Pages, Labels Page and Archives Page. Though I will write about having custom Layout in your blog later , In this post I will explain how to show only post titles in labels page and Archives page….

  • 45+ Unbelievable Landscape Photography Inspirations

    Beach Grass, Scotland Marram beach grass blowing on the coast of the Isle of Lewis. Pampa – Santa Fe, Argentina Hengill Mountain, Iceland Hengill mountain is close to Reykjavik and is famous for its geothermal areas and vivid colours. Storm Clouds, South Dakota Large powerful storms can be nearly a daily occurrence during the summer…

  • The Battle Between CSS-in-JS and Traditional CSS: Pros, Cons, and Best Practices

    If you’re a web developer, chances are you’ve heard of both CSS-in-JS and traditional CSS. Let’s start with a quick explanation of each: CSS-in-JS: A method of styling web pages where CSS styles are written in JavaScript files and applied to components at runtime. Traditional CSS: The standard way of styling web pages using a…