Today we will see how to add a nice page number navigation hack blogger.
The default navigation links (i.e Older Posts) is not the friendly
visitor if you are having a lot of jobs and bloggers readers.Few has
some problems with the above script navigation page. Now here is a
completely new script and work for numbered page navigation (i.e.
Panigation) for Blogger. The paging widget for blogger it easy for the
visitor. It is a must have for any new blogs.This new script allows you
to add numbered page navigation to blogger/ blogspot blog with page
numbers starting(1, 2, 3, 4 ….) like those of a book.
Add Numbered Page Navigation Widget With DIfferent Styles For Blogger / Blogspot
Page navigation widget for blogger is most popular widget, and most bloggers are using this. because these players are only provided in the wordpress blogs hosted or blogs.But now his trick has been made available to bloggers is also here that I am giving this Page Navigation Widget with different styles and options for full customization.
Now go to Layout>Add a gadget>HTML/Javascript. Then paste the code below:
<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfD2rgSYw-xbD44UTW8pTBBP5eJEy4MUy4Cn3hYRJ-eJtA7lO8PSWsUekXxlguJp2-Cu8fMcbkWQNut9VH-vt0-o0rOUQMSc_9uBY7dqe2wxtiqdbyUi31njQpnHNzxMr58LY7AxdaLuU/s1600/wp5.jpg) 0 -50px repeat-x}.showpageNum a:hover{background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfD2rgSYw-xbD44UTW8pTBBP5eJEy4MUy4Cn3hYRJ-eJtA7lO8PSWsUekXxlguJp2-Cu8fMcbkWQNut9VH-vt0-o0rOUQMSc_9uBY7dqe2wxtiqdbyUi31njQpnHNzxMr58LY7AxdaLuU/s1600/wp5.jpg) 0 -25px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfD2rgSYw-xbD44UTW8pTBBP5eJEy4MUy4Cn3hYRJ-eJtA7lO8PSWsUekXxlguJp2-Cu8fMcbkWQNut9VH-vt0-o0rOUQMSc_9uBY7dqe2wxtiqdbyUi31njQpnHNzxMr58LY7AxdaLuU/s1600/wp5.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script>
Now Drag and drop it after the blog post gadget.
Thank You
Add Numbered Page Navigation Widget With DIfferent Styles For Blogger / Blogspot
Page navigation widget for blogger is most popular widget, and most bloggers are using this. because these players are only provided in the wordpress blogs hosted or blogs.But now his trick has been made available to bloggers is also here that I am giving this Page Navigation Widget with different styles and options for full customization.
Now go to Layout>Add a gadget>HTML/Javascript. Then paste the code below:
<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfD2rgSYw-xbD44UTW8pTBBP5eJEy4MUy4Cn3hYRJ-eJtA7lO8PSWsUekXxlguJp2-Cu8fMcbkWQNut9VH-vt0-o0rOUQMSc_9uBY7dqe2wxtiqdbyUi31njQpnHNzxMr58LY7AxdaLuU/s1600/wp5.jpg) 0 -50px repeat-x}.showpageNum a:hover{background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfD2rgSYw-xbD44UTW8pTBBP5eJEy4MUy4Cn3hYRJ-eJtA7lO8PSWsUekXxlguJp2-Cu8fMcbkWQNut9VH-vt0-o0rOUQMSc_9uBY7dqe2wxtiqdbyUi31njQpnHNzxMr58LY7AxdaLuU/s1600/wp5.jpg) 0 -25px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfD2rgSYw-xbD44UTW8pTBBP5eJEy4MUy4Cn3hYRJ-eJtA7lO8PSWsUekXxlguJp2-Cu8fMcbkWQNut9VH-vt0-o0rOUQMSc_9uBY7dqe2wxtiqdbyUi31njQpnHNzxMr58LY7AxdaLuU/s1600/wp5.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script>
Now Drag and drop it after the blog post gadget.
Thank You
0 comments:
Post a Comment