Page Number Navigation Widget to Blogger

mixanikos365
Author - mixanikos365
2:48 PM
Adding page number navigation bar to blogger for easy access your blog by Jump. Cool page number navigation widget for blogger easy to add in blogger for enter one page top another page. While we open a new blogger blog then sometimes can not add page number navigation to our blogspot blog. Because some themes are not prepared for page number navigation. So, we try to add page numbered navigation to our sites. I will discuss here how to add page number navigation to blogger to easy.
Benefit of page number navigation




To all users suppose you have 100 of page in your blog and you have not page number navigation button in your blog you have only older post button newer post button how to visitor know how many page you have in your blog. 2nd think is this suppose somebody want to go on page number 40 so by using page number navigation they easy can jump on page number to 40 so this widget make easy to access your site or blog. When we publish new post in our blog site then simply older post go back in blog site, so We can not find out it easily. If we use page number here then we can easy find out total page number if we want it. So it is easy way to find out whole blog post while we need it and for various blogger’s it is useful way.
How to add page number navigation in blogger?
Sign in – in your blogger account
Go to blogger layout option.
Select add Gadget option
Select “HTML/JavaScript” Gadget and past below given Java Script in HTML/JavaScript content box.(See below demo image)



5. Now drag this widget just below of blogger posts section

Below given some page navigation style which style you like just copy Below given code and past in HTML/JavaScript box.


1st Style





Preview:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<style>
#blog-pager {
	clear: both;
	margin: 20px 0 20px;
	font-size: 12px;
	padding: 10px 0;
}

#blog-pager-newer-link {
	float: left;
}

#blog-pager-older-link {
	float: right;
}

.Profile img {
	border: 3px solid;
	float: left;
	margin: 5px 10px 5px 0;
	padding: 2;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.profile-data {
	color: #999999;
	font: bold 20px/1.6em Arial, Helvetica, Tahoma, sans-serif;
	font-variant: small-caps;
	margin: 0;
	text-transform: capitalize;
}

.profile-datablock {
	margin: 0.5em 0;
}

.profile-textblock {
	line-height: 1.6em;
	margin: 0.5em 0;
}

a.profile-link {
	clear: both;
	display: block;
	font: 80% monospace;
	padding: 10px 0;
	text-align: center;
	text-transform: capitalize;
}

h2.date-header,
.PageList h2 {
	display: none;
}

#blog-pager-older-link a,
#blog-pager-newer-link a,
a.home-link,
.showpageNum a,
.showpage a {
	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMdsdVuncZyQFsjXSR34StJVv0HvbASfP2XAKB7Nqu_koUZn_PiIzVgjfn_T_Is6EEgYE4E1a1EU8ZSL5rQZXPivsWMRcEy9cV8Oi9ssWcBoTqWVqjNDyZP1ijew1C7yCKmxrzRKjGwwY/w1-h26-no/ABT+nav1.jpg) repeat-x;
	border: 1px solid #ae4402;
	color: #fff;
	margin: 2px;
	padding: 6px 10px 5px;
	text-decoration: none;
	text-shadow: 1px 0 1px #000;
}

#blog-pager-older-link a:hover,
#blog-pager-newer-link a:hover,
a.home-link:hover,
.showpageOf,
.showpagePoint,
.showpageNum a:hover,
.showpage a:hover {
	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDXFtge2x_Op_bkWm3USvHSmb9JzIActpKEq5V0hCW4_FL88aQ5ZPnfCn_gcRGab73Ll9Y-Am1GnpRNo0ObNTk7K2brwNSd6nRtdczcJpVNZwMmyH_MEOlA-IldnEeUmFSYkBQQXE-zM/w1-h26-no/ABT+nav2.jpg) repeat-x;
	border: 1px solid #000000;
	color: #fff;
	margin: 2px;
	padding: 6px 10px 5px;
	text-shadow: 1px 0 1px #000;
}
</style>
<script type=’text/javascript’>
var postperpage = 7;
var numshowpage = 6;
var upPageWord = ”Prev.”;
var downPageWord = ”Next”;
var urlactivepage = location.href;
var home_page = ”/”
</script>
<script src=’https://allbloggertips.googlecode.com/svn/ABT-Page-Navigation.js’ type=’text/javascript’></script>


2nd Style





Preview:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<style>
#blog-pager {
	clear: both;
	margin: 20px 0 20px;
	font-size: 12px;
	padding: 10px 0;
}

#blog-pager-newer-link {
	float: left;
}

#blog-pager-older-link {
	float: right;
}

.Profile img {
	border: 3px solid;
	float: left;
	margin: 5px 10px 5px 0;
	padding: 2;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.profile-data {
	color: #999999;
	font: bold 20px/1.6em Arial, Helvetica, Tahoma, sans-serif;
	font-variant: small-caps;
	margin: 0;
	text-transform: capitalize;
}

.profile-datablock {
	margin: 0.5em 0;
}

.profile-textblock {
	line-height: 1.6em;
	margin: 0.5em 0;
}

a.profile-link {
	clear: both;
	display: block;
	font: 80% monospace;
	padding: 10px 0;
	text-align: center;
	text-transform: capitalize;
}

h2.date-header,
.PageList h2 {
	display: none;
}

#blog-pager-older-link a,
#blog-pager-newer-link a,
a.home-link,
.showpageNum a,
.showpage a {
	background: url(https://lh6.googleusercontent.com/-zvDQ4P4UvtA/UaxWjMa_yNI/AAAAAAAAADI/Sq_08RjZWAE/w1-h26-no/ABT+nav3.jpg) repeat-x;
	border: 1px solid #ae4402;
	color: #fff;
	margin: 2px;
	padding: 6px 10px 5px;
	text-decoration: none;
	text-shadow: 1px 0 1px #000;
}

#blog-pager-older-link a:hover,
#blog-pager-newer-link a:hover,
a.home-link:hover,
.showpageOf,
.showpagePoint,
.showpageNum a:hover,
.showpage a:hover {
	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDXFtge2x_Op_bkWm3USvHSmb9JzIActpKEq5V0hCW4_FL88aQ5ZPnfCn_gcRGab73Ll9Y-Am1GnpRNo0ObNTk7K2brwNSd6nRtdczcJpVNZwMmyH_MEOlA-IldnEeUmFSYkBQQXE-zM/w1-h26-no/ABT+nav2.jpg) repeat-x;
	border: 1px solid #000000;
	color: #fff;
	margin: 2px;
	padding: 6px 10px 5px;
	text-shadow: 1px 0 1px #000;
}
</style>
<script type=’text/javascript’>
var postperpage = 7;
var numshowpage = 6;
var upPageWord = ”Prev.”;
var downPageWord = ”Next”;
var urlactivepage = location.href;
var home_page = ”/”
</script>
<script src=’https://allbloggertips.googlecode.com/svn/ABT-Page-Navigation.js’ type=’text/javascript’></script>


3rd Style





Preview:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<style>
#blog-pager {
	clear: both;
	margin: 20px 0 20px;
	font-size: 12px;
	padding: 10px 0;
}

#blog-pager-newer-link {
	float: left;
}

#blog-pager-older-link {
	float: right;
}

.Profile img {
	border: 3px solid;
	float: left;
	margin: 5px 10px 5px 0;
	padding: 2;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.profile-data {
	color: #999999;
	font: bold 20px/1.6em Arial, Helvetica, Tahoma, sans-serif;
	font-variant: small-caps;
	margin: 0;
	text-transform: capitalize;
}

.profile-datablock {
	margin: 0.5em 0;
}

.profile-textblock {
	line-height: 1.6em;
	margin: 0.5em 0;
}

a.profile-link {
	clear: both;
	display: block;
	font: 80% monospace;
	padding: 10px 0;
	text-align: center;
	text-transform: capitalize;
}

h2.date-header,
.PageList h2 {
	display: none;
}

#blog-pager-older-link a,
#blog-pager-newer-link a,
a.home-link,
.showpageNum a,
.showpage a {
	background: url(https://lh3.googleusercontent.com/-w9ZA6PoJmXI/UaxcShxGABI/AAAAAAAAAD4/Cm_b0ycvJbg/w1-h26-no/ABT+nav4.jpg) repeat-x;
	border: 1px solid #ae4402;
	color: #fff;
	margin: 2px;
	padding: 6px 10px 5px;
	text-decoration: none;
	text-shadow: 1px 0 1px #000;
}

#blog-pager-older-link a:hover,
#blog-pager-newer-link a:hover,
a.home-link:hover,
.showpageOf,
.showpagePoint,
.showpageNum a:hover,
.showpage a:hover {
	background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDXFtge2x_Op_bkWm3USvHSmb9JzIActpKEq5V0hCW4_FL88aQ5ZPnfCn_gcRGab73Ll9Y-Am1GnpRNo0ObNTk7K2brwNSd6nRtdczcJpVNZwMmyH_MEOlA-IldnEeUmFSYkBQQXE-zM/w1-h26-no/ABT+nav2.jpg) repeat-x;
	border: 1px solid #000000;
	color: #fff;
	margin: 2px;
	padding: 6px 10px 5px;
	text-shadow: 1px 0 1px #000;
}
</style>
<script type=’text/javascript’>
var postperpage = 7;
var numshowpage = 6;
var upPageWord = ”Prev.”;
var downPageWord = ”Next”;
var urlactivepage = location.href;
var home_page = ”/”
</script>
<script src=’https://allbloggertips.googlecode.com/svn/ABT-Page-Navigation.js’ type=’text/javascript’></script>

Over to You

I recommend that if anyone want to add page numbered navigation in blogspot blog then they can use above nice navigation bar for blogger blog. Everyone want to get good feedback from their blog site. So, be good designer and publish your blog when it is over all navigated. If you think it’s a useful post for you request then share it to others for help.







Tags

You may like these posts

Show more

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
Share to other apps
Copy Post Link