Do you want to add a numbered page navigation widget into your blogspot blog? If yes, then you have just arrived to the right page. Today we will learn that how we can install a numbered pagination widget into our blogger blog.
To install numbered pagination widget, first go to:
Blogger Dashboard >> Template >> Edit HTML and search for </b:skin> tag.
After finding </b:skin> tag it is time for us to install the below given CSS3 stylesheet for our pagination widget into our template just before </b:skin> tag.
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
| .showpageNum a {background: #F4F4F4;padding: 5px;padding-left: 10px;border: 1px solid #b9b9b9;padding-right: 10px;margin-right: 5px;color: #000;font-weight: bold;}.showpage a {background: #F4F4F4;padding: 5px;padding-left: 10px;border: 1px solid #b9b9b9;padding-right: 10px;margin-right: 5px;color: #000;font-weight: bold;}.showpageArea {float: left;}.feed-links {display: none;}.showpageArea a {float: left;font-size: 15px;color: #111!important;padding-left: 15px;padding-right: 15px;}.showpagePoint { font-family: 'Merriweather', serif; border: 1px solid #b9b9b9; padding: 5px; background-color: rgb(244, 244, 244);float: left;font-size: 15px;padding-left: 15px;padding-right: 15px; margin-right: 5px;}.showpageArea a {text-decoration: none;}.showpageArea {float: left;width: 363px;margin-top: 10px;}.showpageOf {display: none;} |
Once you have added the stylesheet, it’s time to add the Javascript code just before </body> tag. The Javascript code is given below:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!--Page Navigation Starts--><b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'><script type='text/javascript'>var pageCount=6;var displayPageNum=6;var upPageWord ='Previous';var downPageWord ='Next';</script><script src='https://mirocine.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/></b:if></b:if><!--Page Navigation Ends --> |
No comments:
Post a Comment