Awesome Page Navigation Widget For Blogger With Scroll - Page
navigation widget helps your readers to jump from one page to another
page directly.This page navigation widget was developed by karaboz and abu-farhan
converted it into blogger.It has a small knob at bottom by which any
visitors can go directly on last page,also they can select any page on
your blog.Search on Google you will see many widgets about page
navigation but if you are using this widget then your reader/visitors
can go to a specific page which they want.
See Demo At Bottom Of My Homepage
How To Add Page Navigation Widget To Blogger?
You can add this widget in just two steps.
- Adding The CSS.
- Adding The Script.
Now lets see how to add page navigation to your blog.
Adding The CSS
- Go to Blogger Dashboard > Design > Edit HTML.
- Backup your template.
- Now find ]]></b:skin>
- Add below code just above ]]></b:skin>.
.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE8I7Vu2Lr6V6nImiERyltmdrCEeGJ56YUtG6mXjw6MAAeWHVKM8EpwxN0TzQ1ShlOrxjy1sE2-rQnP4wSk0A3Kq7S7z_0MZGwCT66Ijr0EtU3mJK-qqY6FrBJLGZ05n4buDdAASDF2mE/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}Adding The Scripts
- Now find this </body>
- Add below code just above that.
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forb logger-v1.0.0.js' type='text/javascript'/>
Change based on your blog setting :
var postperpage=7; (Line Number 6 In Above Code)
var numshowpage=6; (Line Number 7 In Above Code)
Postperpage : Number of posts per page
numshowpage : Numbers to show on widget (Recommend - 6)
I hope you will like this widget.
0 komentar:
Posting Komentar