This is the Part 2 of this Tutorial. This Tutorial is about how to change Page Navigation Style for blogger with Five Page Navigation Styles. I am pretty sure, you will like these styles. The most important thing in this tutorial is that this Tutorial is lengthy so it will take your time to change Page Navigation Style for blogger, because this is the Part 1 of this tutorial. But you don't have to worry about this because i have arrange this tutorial so that you find easy to perform these following steps and that's why i divided this tutorial in two parts.
This is the view of those Page Navigations Styles.
Style 1
.blog-pager,#blog-pager{
font-family:"Times New Roman", Times, serif;
font-weight:normal;
width:500px;
font-size: 0.8em;
padding: 0.6em 0.5em;
background: #3E3E3E;
}
.showpageNum a,.showpage a {
text-decoration: none;
padding: 0.3em 0.5em;
color: #055d90;
white-space: nowrap;
background: #3E3E3E;
color: #ffffff;
margin-right: 0.1em;
}
.showpageNum a:hover,.showpage a:hover {
background: #EC5210;
}
.showpageOf{
margin:0 8px 0 0;
display:none;
}
.showpagePoint {
text-decoration: none;
padding: 0.3em 0.5em;
color: #055d90;
white-space: nowrap;
background: #313131;
color: #868686;
margin-right: 0.1em;
}
Style 2
.blog-pager,#blog-pager{
font-family:"Times New Roman", Times, serif;
font-weight:normal;
width:500px;
font-size: 0.8em;
padding: 0.6em 0.5em;
background-color:#000000;
text-align:center;
}
.showpageNum a,.showpage a {
text-decoration: none;
padding: 0.3em 0.5em;
color: #055d90;
white-space: nowrap;
color: #ffffff;
margin-right: 0.1em;
}
.showpageNum a:hover,.showpage a:hover {
color:#A30A1A;
text-decoration:none;
background-color:#ffffff;
}
.showpageOf{
margin:0 8px 0 0;
display:none;
}
.showpagePoint {
color:#ffffff;
text-decoration:none;
background-color:#A9061B;
width:36px;
height:16px;
font-size:12px;
padding-left:5px;
padding-right:6px;
padding-top:3px;
padding-bottom:4px;
}
Style 3
.blog-pager,#blog-pager{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
width:500px;
text-align:center;
}
.showpageNum a,.showpage a {
float:left;
line-height:14px;
padding:2px 4px 0;
min-width:8px;
border:1px solid #d7dce0;
color:#848a8c;
text-decoration:none;
margin:0 3px;
}
.showpageNum a:hover,.showpage a:hover {
color:#fff;
background:#7f8487;
border-bottom-color:#848a8c;
}
.showpageOf{
margin:0 8px 0 0;
display:none;
}
.showpagePoint {
color:#fff;
background:#7f8487;
border-bottom-color:#848a8c;
float:left;
line-height:14px;
padding:2px 4px 0;
min-width:8px;
border:1px solid #d7dce0;
text-decoration:none;
}
Style 4
.blog-pager,#blog-pager{
font-size: 0.6em;font-family:verdana;
padding: 0.2em 0.5em;
margin-right: 0.1em;
border:1px solid #FFF;
background: #FFF; text-decoration: none;
width:500px;
}
.showpageNum a,.showpage a {
color: #693;
text-decoration: underline;
border: 1px solid #E3E3E3;
text-decoration: none;
padding: 0.2em 0.5em;
}
.showpageNum a:hover,.showpage a:hover {
border: 1px solid #693;
}
.showpageOf{
margin:0 8px 0 0;
display:none;
}
.showpagePoint {
border: 1px solid #693;
padding: 0.2em 0.5em;
font-weight: bold;
background: #693; color: #FFF;
}
Style 5
.blog-pager,#blog-pager{
font-family:"Times New Roman", Times, serif;
font-weight:normal;
width:500px;
font-size: 0.8em;
}
.showpageNum a,.showpage a {
display: block;
float: left;
padding: 3px 5px 3px 5px;
margin-right: 3px;
border: 1px solid;
color: #FF6400;
border-color: #FF6400;
background: #FFF url(http://i1133.photobucket.com/albums/m596/abu-farhan/Meneame.png) bottom left repeat-x;
text-decoration:none;
}
.showpageNum a:hover,.showpage a:hover {
border-color: #FF9400;
background: #FFBE94;
color: #FF6400;
}
.showpageOf{
margin:0 8px 0 0;
display:none;
}
.showpagePoint {
border-color: #FF9400;
background: #FFBE94;
color: #FF6400;
border: 1px solid;
font-weight: bold;
display: block;
float: left;
padding: 3px 5px 3px 5px;
margin-right: 3px;
}
Step 1:
1: Go To Blogger > Design > Page Elements
2: Don't check the "Expand widget Templates" box
3: Search for ]]></b:skin>
4: Copy your desired css script from above
5: Just before ]]></b:skin> paste the css script
Step 2:
6: Search for </body>
7: Just before </body> paste this:
<script type='text/javascript'>;var home_page='/';var urlactivepage=location.href;var postperpage=7;var numshowpage=4;var upPageWord ='Prev';var downPageWord ='Next';</script>;<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
Change this based on your blog setting:
var postperpage=7;
var numshowpage=4;
postperpage : How many posts per page for your blog.numshowpage : How many number will show in your page navigation.
Just change the numbers only.
8: Save it.
Step 3:
9: Again go to the Edit HTML page and check the "Expand widget Templates" box
10: Search for this:
11: Replace this with:
'data:label.url + "?&max-results=7"'
Change 7 base on how many post per page you want to show.
12: Save it. You are done.
0 comments:
Post a Comment