Monday, July 25, 2016

Take the blog by adding a Stylist Page Number Navigation

Blog or website, all you need is to add a Page Number Navigation. Because the blog post from one page to other pages to uses the Page Number Navigation. Page Number Navigation This means that your blog will not be perfect. Indeed, visitors will think that your blog is not a job. Today I'll show you how a blog can easily add a Page Number Navigation.

Page Number Navigation associated with the blog, it is not an easy task. This experience is something about blogging. To added it your Blogger template coding. Today I'll show you the way that you do not have to do any type of template. Layout Gadget to your blog just using the Page Number Navigation is very easy to add.

How to Added this Widget

To add it to your web design ideas will not be any different. Who has not dwelling on any day blog more easily be able to add it.
  1. First, log in to your Blogger account.
  2. Then go to your blog dashboard.
  3. Add a Gadget from the left side of the Layout options to clean.
  4. The HTML / JavaScript and clean.
  5. Now, copy the following codes HTML / JavaScript paste it into the box. 
    <style type='text/css'>
    .blog-pager,#blog-pager {
    font-family:"Times New Roman", Times, serif;
    font-weight:normal;
    font-size:12px;
    width:700px;
    padding:17px;
    }
    .showpageNum a,.showpage a {
    background: rgb(15, 124, 241);
    color:#FFF;
    margin-right:.6em;text-decoration:none;
    font-size:15px;
    font-weight:bold;
    line-height:0;
    text-align:center;
    padding:7px 13px 7px;
    -moz-border-radius:36px;
    -webkit-border-radius:8px;
    border-radius:8px;
    }
    .showpageNum a:hover,.showpage a:hover {
    background: rgb(0, 49, 247);
    color:#000000;
    margin-right:.6em;
    text-decoration:none;
    font-size:15px;
    font-weight:bold;
    line-height:0;
    text-align:center;
    padding:7px 13px 7px;
    -moz-border-radius:36px;
    -webkit-border-radius:12px;
    border-radius:12px;
    }
    .showpageOf {
    margin:0 8px 0 0;
    font-family:'Coming Soon', cursive;
    text-decoration:none;
    font-size:100%;
    }
    .showpagePoint {
    background: rgb(0, 49, 247);
    color:#FFF;
    margin-right:.6em;
    text-decoration:none;
    font-size:15px;
    font-style:italic;
    line-height:0;
    text-align:center;
    padding:7px 13px 7px;
    -moz-border-radius:36px;
    -webkit-border-radius:8px;
    border-radius:8px;
    }
    </style>
    <script type='text/javascript'>
    var home_page_url = location.href;
    var pageCount=2;
    var displayPageNum=3;
    var upPageWord ='Previous';
    var downPageWord ='Next';
    function showpageCount(json) {
    var thisUrl = home_page_url;
    var htmlMap = new Array();
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= '';
    var upPageHtml ='';
    var downPageHtml ='';

    for(var i=0, post; post = json.feed.entry[i]; i++) {

    var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
    timestamp = encodeURIComponent(timestamp1);

    var title = post.title.$t;

    if(title!=''){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }
    if(title!='') postNum++;
    htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
    }
    }
    itemCount++;
    }
    for(var p =0;p< htmlMap.length;p++){
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    if(fFlag ==0 && p == thisNum-2){
    if(thisNum==2){
    upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
    }else{
    upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
    }
    fFlag++;
    }
    if(p==(thisNum-1)){
    html += '<span class="showpagePoint">'+thisNum+'</span>';
    }else{
    if(p==0){
    html += '<span class="showpageNum"><a href="/">1</a></span>';

    }else{
    html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
    }
    }
    if(eFlag ==0 && p == thisNum){
    downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
    eFlag++;
    }}}
    if(thisNum>1){
    html = ''+upPageHtml+' '+html +' ';
    }
    html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
    if(thisNum<(postNum-1)){
    html += downPageHtml;
    }
    if(postNum==1) postNum++;
    html += '</div>';
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");
    if(postNum <= 2){
    html ='';
    }
    for(var p =0;p< pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }
    if(pageArea&&pageArea.length>0){
    html ='';
    }
    if(blogPager){
    blogPager.innerHTML = html;
    }}
    function showpageCount2(json) {
    var thisUrl = home_page_url;
    var htmlMap = new Array();
    var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
    thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= '';
    var upPageHtml ='';
    var downPageHtml ='';

    var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
    var thisUrl = home_page_url;

    for(var i=0, post; post = json.feed.entry[i]; i++) {

    var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
    timestamp = encodeURIComponent(timestamp1);

    var title = post.title.$t;

    if(title!=''){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }
    if(title!='') postNum++;
    htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
    }}itemCount++;}
    for(var p =0;p< htmlMap.length;p++){
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    if(fFlag ==0 && p == thisNum-2){
    if(thisNum==2){
    upPageHtml = labelHtml + upPageWord +'</a></span>';
    }else{
    upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
    }fFlag++;}
    if(p==(thisNum-1)){
    html += '<span class="showpagePoint">'+thisNum+'</span>';
    }else{
    if(p==0){
    html = labelHtml+'1</a></span>';
    }else{
    html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
    }}
    if(eFlag ==0 && p == thisNum){
    downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
    eFlag++;
    }}}
    if(thisNum>1){
    if(!isLablePage){
    html = ''+upPageHtml+' '+html +' ';
    }else{
    html = ''+upPageHtml+' '+html +' ';
    }}
    html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
    if(thisNum<(postNum-1)){
    html += downPageHtml;
    }
    if(postNum==1) postNum++;
    html += '</div>';
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");
    if(postNum <= 2){
    html ='';
    }
    for(var p =0;p< pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }
    if(pageArea&&pageArea.length>0){
    html ='';
    }
    if(blogPager){
    blogPager.innerHTML = html;
    }}
    </script>
    <script type='text/javascript'>
    var thisUrl = home_page_url;
    if (thisUrl.indexOf("/search/label/")!=-1){
    if (thisUrl.indexOf("?updated-max")!=-1){
    var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
    }else{
    var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
    }}
    var home_page = "/";
    if (thisUrl.indexOf("?q=")==-1){
    if (thisUrl.indexOf("/search/label/")==-1){
    document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
    }else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
    }}
    </script>
    </script>
  • Now click Save. That's all.

Customization

  • If you want to show how many pages to write it on a post-days 'var pageCount = 2'
  • Write down how many days you want to show on the button 'var displayPageNum = 3'  
Previous Post
Next Post

0 comments: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

Post a Comment

 
Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE