Add Professional & Light Weight Navigation on Homepages

There are thousand types of navigation available on Internet for Blogger. But they look funky and give a bad look to your blog because there look is not professional. So today, I brought you a fantastic, light weight & professional navigation for homepage with awesome hover effect. As default, Blogger show only 'Older Posts' & 'Newer Posts' on on homepage which is not eye-catching and they are non attractive. So here is the tutorial, how to implement this new one on your blogger blog to add a professional look on your blog.

By using this navigation, you can attract your blog visitors' eyes and also give your blogger blog, a professional look. Actually, this navigation is created by a famous blog, MBT but they have not released their navigation (of homepage) stylesheet yet. However, they have released the stylesheet of their post pages navigation which is also a beautiful widget that can be added from here.

DEMO: Go to MBT's homepage & look for navigation at the bottom of the page.

Installing Navigation for Homepage

Homepage navigation help your blog's visitor to see recent posts you made. If you want your visitors to stay at your blog for a longer time, homepage navigation can help you in this. Their are thousands of navigation styles are already available on web but they all are non-professional and give a funky look to your blog. So here, I am providing you a eye-catching, professional and light weight navigation for your blog. Learn how to add it.

• Go to Blogger Dashboard > Layout > Add a Gadget
• Leave title field empty and navigate to content field.
• Now, paste below code on content field:

<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=4;
var upPageWord="&#171;";
var downPageWord="&#187;";
var urlactivepage=location.href;var home_page="/"
</script>
<script type='text/javascript'>
var nopage;
var jenis;
var nomerhal;
var lblname1;
halamanblogger();
function loophalaman(banyakdata) {
    var html = '';
    nomerkiri = parseInt(numshowpage / 2);
    if (nomerkiri == numshowpage - nomerkiri) {
        numshowpage = nomerkiri * 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>
<style>
/*-------- Page Navigation ------*/
#blog-pager{clear: both;
margin: 50px 0px 0px 0px;
padding: 0px;
text-align: center;}
.showpageNum a,.showpage a{color: #333;
text-decoration: none;
padding: 7px 14px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCQ27RpAXl9-ibZAbiXmjbmZx5eI-FXUH8KpK3Mzl3qywId8LlbQusH00GEJvFERkiu6ut3musoU3Yf0oEamw7L41llQbzeZVVMIGZhArDo-pm9xgbCarxtBD8qOixukUE-MxGQCHfhKM/s1600/bg5.png) 0% 0% repeat scroll;
font-family: sans-serif, helvetica;
font-size: 16px;
font-weight: bold;
margin: 5px 2px;
border: 1px solid #ddd;
}
.showpagePoint,.showpageNum a:hover,.showpage a:hover
{color: #FFF;
font-family: sans-serif, helvetica;
font-size: 16px;
font-weight: bold;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 1);
margin: 5px 2px;
padding: 7px 14px;
border: 1px solid #000;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}
.showpageOf{color: #FFF;
margin: 2px;
text-shadow: 1px 0px 1px #000;
background: none repeat scroll 0% 0% #000;
border: 4px solid #26292C;
padding: 7px 14px;
display:none;
}
</style>
</b:if></b:if>

• Now, click on Save button.

Take a look of your blog and you will see a professional and light weight navigation with beautiful hover effect. 

Final Words from Author

So here's our first hacked widget from MBT and we are damn sure that you will like this and going to implement it on your blog. However, if you got stuck while adding this navigation, kindly leave your comment and we will fix your problem soon. We will also release more widget in coming days. So stay tuned! Thank You!

Share this post