Add Page Navigation Widget in Blogger
- Login to Blogger > Dashboard
- Click on Drop Down Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML > Proceed > Expand Widget Templates
- Press Ctrl + F and search the code shown below.
]]></b:skin>
- Paste below code just before it.
.pagenavi{
clear:both;margin:10px auto;text-align:center
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pagenavi a:hover,.pagenavi .current{
background:#ff8400;color:#fff;text-decoration:none
}
.pagenavi .pages,.pagenavi .current{
font-weight:bold
}
.pagenavi .pages{border:none}
- Now find below code
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’>
- If above code doesn’t found then search for below code
<b:widget id=’Blog1′ locked=’false’ title=’Blog Posts’ type=’Blog’>- Now paste below code after above codes.
<b:includable id=’page-navi’>
<div class=”pagenavi”>
<script type=”text/javascript”>
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: “First”,
lastText: “Last”,
nextText: "»",
prevText: "«" }
</script>
<script type=”text/javascript” src=”https://1337231456d35b1a41687e3e5c18973044308e1a.googledrive.com/host/0B9tMJDoQ8Z2ETUc0ZGYtUlpRYjg”></script>
<div class=”clear” />
</div>
</b:includable>
Now again find below code
<b:include name=’nextprev’/>
Now replace it with below codes.
<b:if cond=’data:blog.pageType == “index”‘>
<b:include name=’page-navi’ />
<b:else/>
<b:if cond=’data:blog.pageType == “archive”‘>
<b:include name=’page-navi’ />
</b:if>
</b:if>
- Now Finally Save Your Template and you are done
Benefit
You can easily jump to any page from home page.
If Any Problem Comes, Ask in Comments