Monday, November 21, 2011

How To Make Numbered Page Navigation For Blogger

On this occasion the author will share tips on how bloggers make Numbered Page Navigation. Starting from the open blog sites I found these tips. Then to prove that these tips properly then I implemented in Yudo's blog 31 and the results are like this:

Quite easy, you just copy and paste the html script to your blog. Now I will tell you how to make it.

1. Login to Blogger -> Dashboard -> Design -> Edit Html.
2. Do not click the checkbox "Expand Widget Templates'.
3. Find the following code ]]></b:skin> (use Ctrl + F to make it easier to find the code).
4. Put the script below the above code ]]></b:skin>.


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
 
5. The next step find the code </ body>.
6. And place the following script code above </ body>.
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

Done ^ _ ^. If you have questions about how to install the script above please comment at the end of the posting. Thank you for visiting and hopefully useful.
Source : Bloggerplugins

Posted By : Yudo'S Blog 31

Read also other articles:

0 comments:

Post a Comment

Page Rank Checker