Today, after a long time, I am publishing an awesome blogging guide, this awesome widget will help you create a professional blog in minutes. Blogger’s pagination widget is mandatory in terms of functionality and user-friendliness. It will help you organize your blog posts in the most professional way. Based on simple scripts, this widget is fast and reliable. Installing this widget is very simple and straightforward.
Let’s go ahead and see how to add a pagination widget to Blogger.
Why is the pagination widget important?
If you adhere to the blogger’s default format, which is the Previous and Next page navigation button, this limits the functionality of your blog, while at the same time it severely degrades your blog’s navigation as users cannot easily navigate your blog and have to browse every page where, as if you were using this pagination widget, they can check any page they want, viewing different posts will be easy, not only is it functional, but it will give your blog a professional look.
What’s special about our widget?
Okay, everyone says they made the best widget and that’s okay, but my claim is that you will have a widget that no one else has. Yes, it’s true. Our widget is professionally optimized to show every message without skipping and it loads with Ajax making it load faster !! Yipee (very fast loading). Also, the script we are using is mobile-friendly.
Let’s start step 1 (adding CSS)
Before editing, we recommend that you back up your template so that something goes wrong, you still have your blog design safe.
The first thing you need to do is log into your Blogger account and go to >> Themes >> Edit HTML and search for the tag]]> </ b: skin> and paste the following code just above it.
/ * ######## Pagination Widget by SoraBloggingTips ######################### * /
# blog-pager {
clear: both;
text-align: center;
margin: 0
}
# blog-pager-newer-link a, # blog-pager-older-link a {
display: block;
float: left;
margin-right: 6px;
padding: 0 13px;
border: 1px solid # 010101;
text-transform: uppercase;
line-height: 32px;
font-weight: 700;
color: # 010101
}
# blog-pager-newer-link a: hover, # blog-pager-older-link a: hover {
background-color: # 010101;
color: #fff! important
}
.showpageNum a, .showpage a, .showpagePoint {
display: block;
float: left;
margin-right: 6px;
padding: 0 12px;
border: 1px solid # 010101;
text-transform: uppercase;
line-height: 32px;
font-weight: 700;
color: # 010101
}
.showpageNum a: hover, .showpage a: hover {
background-color: # 010101;
color: #fff! important
}
.showpageNum ai, .showpage ai {
transition: all .0s ease;
-webkit-transition: all .0s ease;
-moz-transition: all .0s ease;
-o-transition: all .0s ease
}
.showpagePoint {
background-color: # 010101;
color: #FFF
}
.showpageOf {
display: none! important
}Step 2 (adding the script) is the most important !!
This is the most important part of the tutorial and you must do it very carefully. Find the </body> tag in your template and paste the following HTML code just above it.
<b: if cond = 'data: blog.pageType! = & quot; item & quot;'>
<b: if cond = 'data: blog.pageType! = & quot; static_page & quot;'>
<script type = 'text / javascript'>
var postperpage = 7 ;
var numshowpage = 3 ;
var upPageWord = '<< Prev';
var downPageWord = 'Next >>';
var urlactivepage = location.href;
var home_page = "/";
</script>
<script type = 'text / javascript'>
// <! [CDATA [
var nopage; var jenis; var nomerhal; var lblname1; halamanblogger (); function loophalaman (banyakdata) {var html = ''; nomerkiri = parseInt (numshowpage / 2); if (nomerkiri == numshowpage-nomerkiri = nome * 2 + 1} mulai = nomerhal-nomerkiri; if (mulai <1) mulai = 1; maksimal = parseInt (banyakdata / postperpage) +1; if (maksimal-1 == banyakdata / postperpage) maksimal = maksimal-1; akhir = mulai + numshowpage-1; if (akhir> maksimal) akhir = maksimal; html + = "<span class = 'showpageOf'> Page" + nomerhal + 'of' + maksimal + "</span>"; var prevnomer = parseInt (nomerhal ) -1; if (nomerhal> 1) {if (nomerhal == 2) {if (jenis == "page") {html + = '<span class = "showpage"> <a href = "' + home_page + '" > '+ upPageWord +' </a> </span> '} else {html + =' <span class = "showpageNum"> <a href = "/ search / label / '+ lblname1 +'? & max-results = '+ postperpage +'"> '+ upPageWord +' </a> </span> '}} else {if (jenis == "page") {html + = '<span class = "showpageNum"> <a href="#" onclick="redirectpage('+prevnomer+');return false">' + upPageWord + '</a> </span>'} else { html + = '<span class = "showpageNum"> <a href="#" onclick="redirectlabel('+prevnomer+');return false">' + upPageWord + '</a> </span>'}}} if (mulai> 1) {if (jenis == "page") {html + = '<span class = "showpageNum"> <a href="'+home_page+'"> 1 </a> </span>'} else {html + = '<span class = "showpageNum"> <a href = "/ search / label / '+ lblname1 +'? & max-results = '+ postperpage +' "> 1 </a> </span> '}} if (mulai> 2) {html + =' '} for (var jj = mulai ; jj <= akhir; jj ++) {if (nomerhal == jj) {html + = '<span class = "showpagePoint">' + jj + '</span>'} else if (jj == 1) {if (jenis == "page") {html + = '<span class = "showpageNum"> <a href="'+home_page+'"> 1 </a> </span>'} else {html + = '<span class = " showpageNum "> <a href="/search/label/'+lblname1+'?&max-results='+postperpage+'"> 1 </a> </span> '}} else {if (jenis ==" page " ) {html + = '<span class = "showpageNum"> <a href="#" onclick="redirectpage('+jj+');return false">' + jj + '</a> </ span> '} else {html + =' <span class = "showpageNum"> <a href="#" onclick="redirectlabel('+jj+');return false"> '+ jj +' </a> </ span> '}}} if (akhir <maksimal-1) {html + =' '} if (akhir <maksimal) {if (jenis == "page") {html + =' <span class = "showpageNum"> <a href = "#" onclick = "redirectpage ('+ maksimal +'); return false"> '+ maksimal +' </a> </span> '} else {html + =' <span class = "showpageNum"> <a href = "#" onclick = "redirectlabel ('+ maksimal +'); return false"> '+ maksimal +' </a> </span> '}} var nextnomer = parseInt (nomerhal) +1; if (nomerhal <maksimal) {if (jenis == "page") {html + = '<span class = "showpageNum"> <a href = "#" onclick = "redirectpage ('+ nextnomer +'); return false"> '+ downPageWord +' </a> </span> '} else {html + =' <span class = "showpageNum"> <a href = "#" onclick = "redirectlabel ('+ nextnomer +'); return false"> '+ downPageWord +' </a> </span> '}} var pageArea = document.getElementsByName ("pageArea"); var blogPager = document.getElementById ("blog-pager"); for (var p = 0; p <pageArea.length; p ++) {pageArea [p] .innerHTML = html} if (pageArea && pageArea.length> 0) {html = ''} if (blogPager) {blogPager.innerHTML = html}} function hitungtotaldata (root) {var feed = root.feed; var totaldata = parseInt (feed.openSearch $ totalResults. $ t, 10); loophalaman (totaldata)} function halamanblogger ( ) {var thisUrl = urlactivepage; if (thisUrl.indexOf ("/search/label/")!=-1) {if(thisUrl.indexOf("?updated-max")!=-1) {lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/ ") + 14, thisUrl.indexOf ("? Updated-max"))} else {lblname1 = thisUrl.substring (thisUrl.indexOf ("/ search / label /") + 14, thisUrl.indexOf ("? & Max"))} } if (thisUrl.indexOf ("? q =") == - 1 && thisUrl.indexOf (". html") == - 1) {if (thisUrl.indexOf ("/ search / label /") == - 1) {jenis = "page"; if (urlactivepage.indexOf ("# PageNo =")! = - 1) {nomerhal = urlactivepage.substring (urlactivepage.indexOf ("# PageNo =") + 8, urlactivepage.length)} else {nomerhal = 1} document.write ("<script src = \" "+ home_page +" feeds / posts / summary? max-results = 1 & alt = json-in-script & callback = hitungtotaldata \ "> <\ / script>")} else {jenis = "label "; if (thisUrl.indexOf (" & max-results = ") == - 1) {postperpage = 20} if (urlactivepage.indexOf (" # PageNo = ")! = - 1) {nomerhal = urlactivepage.substring ( urlactivepage.indexOf ("# PageNo =") + 8, urlactivepage.length)} else {nomerhal = 1} document.write ('<script src = "' + home_page + 'feeds / posts / summary / - /' + lblname1 + ' ? alt = json-in-script & callback = hitungtotaldata & max-results = 1 "> <\ / script> ')}}} function redirectpage (numberpage) {jsonstart = (numberpage-1) * postperpage; nopage = numberpage; var nBody = document .getElementsByTagName ('head') [0]; var newInclude = document.createElement ('script'); newInclude.type = 'text / javascript'; newInclude.setAttribute ("src", home_page + "feeds / posts / summary? start -index = "+ jsonstart +" & max-results = 1 & alt = json-in-script &callback = finddatepost "); nBody.appendChild (newInclude)} function redirectlabel (numberpage) {jsonstart = (numberpage-1) * postperpage; nopage = numberpage; var nBody = document.getElementsByTagName ('head') [0]; var newInclude = document.createElement ('script'); newInclude.type = 'text / javascript'; newInclude.setAttribute ("src", home_page + "feeds / posts / summary / - /" + lblname1 + "? start-index =" + jsonstart + "& max-results = 1 & alt = json-in-script & callback = finddatepost"); nBody.appendChild (newInclude)} function finddatepost (root) {post = root.feed.entry [0]; var timestamp1 = post.published. $ t .substring (0,19) + post.published. $ t.substring (23,29); var timestamp = encodeURIComponent (timestamp1); if (jenis == "page") {var alamat = "/ search? updated-max = "+ timestamp +" & max-results = "+ postperpage +"#PageNo = "+ nopage} else {var alamat =" / search / label / "+ lblname1 +"? Updated-max = "+ timestamp +" & max-results = "+ postperpage +" # PageNo = "+ nopage} location.href = alamat}
//]]>
</script>
</ b: if>
</ b: if>Note. – If you want to display more messages, change the value highlighted in red in the above code. If you want to increase the numbers in the widget, replace the blue value.
If you are using this widget and some of your posts are missing, remember one thing: you must maintain the same number of posts in your blog settings and pagination widget. There is a 1MB limit on the blogger’s side, only 1MB of images or text that you can show on the homepage, and if you go over that limit and that’s the reason the rest of the post goes on the next page, there is no solution, but you can try page break after 1st paragraph in every post, maybe it will help.
Conclusion
Congratulations !! You did it. Now you’ve learned the “How to Add Pagination Widget to Blogger”. Visit my blog and check out this awesome widget live. Hope you enjoyed this tutorial. If you liked it, please share it with your friends, we are working hard to develop more such wonderful widgets.
