Blogger Page Navigation Hack for colorful Numbering

™» CGC Blog «™ Page Navigation hack for blogger is really awesome trick to stylish the older post and newer post link with attractive page number buttons. You can easily get the Page Navigation Hack trick in the web. Almost all the sites provide the same style of page numbering. I would like to share some of the CSS design which will really change the style of your Page Navigation. To add these styles. Just replace the CSS of the Page Navigation with the CSS available here. You can select the style with the preview. This style includes Gradient effect without any image and has round cornered edges which give more effect to the button.

The Default Buttons look like this.

/* www.techirsh.tk */
.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #9dd53a; /* old browsers */
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217),
color-stop(100%,#7cbc0a)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',
endColorstr='#7cbc0a',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #6db3f2; /* old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2),
color-stop(50%,#54a3ee), color-stop(51%,#3690f0),
color-stop(100%,#1e69de)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2',
endColorstr='#1e69de',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #789EB1; /* old browsers */
background: -moz-linear-gradient(top, #789EB1 0%, #618FA7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#789EB1),
color-stop(100%,#618FA7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1',
endColorstr='#618FA7',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #7d7e7d; /* old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #6B6B6B 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d),
color-stop(100%,#6B6B6B)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d',
endColorstr='#6B6B6B',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #f85032; /* old browsers */
background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c),
color-stop(51%,#f6290c), color-stop(71%,#f02f17),
color-stop(100%,#e73827)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032',
endColorstr='#e73827',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #aebcbf; /* old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a),
color-stop(100%,#0a0809)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',
endColorstr='#0a0809',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #ffb76b; /* old browsers */
background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00),
color-stop(100%,#ff7f04)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b',
endColorstr='#ff7f04',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #9dd53a; /* old browsers */
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217),
color-stop(100%,#7cbc0a)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',
endColorstr='#7cbc0a',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

/* www.techirsh.tk */.showpageArea {font-weight: bold;margin:5px;}
.showpageArea a {text-decoration:underline;color: #fff;}
.showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #3b679e; /* old browsers */
background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),
color-stop(100%,#7db9e8)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e',
endColorstr='#7db9e8',GradientType=0 ); /* ie */
}
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;
background: #aebcbf; /* old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a),
color-stop(100%,#0a0809)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',
endColorstr='#0a0809',GradientType=0 ); /* ie */
}
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;
margin:0 3px;padding:3px 5px;
background: #e2e2e2; /* old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),
color-stop(100%,#fefefe)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',
endColorstr='#fefefe',GradientType=0 ); /* ie */
}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}

Posted in: Blogger

Nguồn : techirsh.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!