Page navigation with google style for blogger Page navigation with google style for blogger | Rizal saputra
RSS
email
Home » , , , » Page navigation with google style for blogger

Page navigation with google style for blogger

I have inspiration to make page navigation with google style.Now I will give this for all of you if you want to use or modify base on you template style.

Step 1 : Log in to your blogger account and navigate to Layout section. Now go to the edit HTML subtab.

Step 2 : search this line ]]></b:skin> and and add this CSS code below above ]]></b:skin> code.

#nav a,#nav a:visited,.blk a{color:#000}
        #nav a{display:block}
        #nav .b a,#nav .b a:visited{color:#20c}
        #nav .i{color:#a90a08;font-weight:bold}
        .csb,.ss{background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png) no-repeat 0 0;height:26px;display:block}
        .ss{background-position:0 -88px;position:absolute;left:0;top:0}
        .cps{height:18px;overflow:hidden;width:114px}
        .mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
        #nav td{padding:0;text-align:center}
(If you blog black background color, change the address http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png becomes http://img683.imageshack.us/img683/1649/navlogo6.png)
 Step 3 : Now search for this code or related in your template ( no need to expand widgets )

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1&#8242; locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>

Now Add This script just below the </b:section> .

if you can’t find you can search (ctrl+f) by this key ” id=’main’ ”

Now Add  script below just below the </b:section> .
<script type='text/javascript'>

    var home_page_url = location.href;   


    var pageCount=10;
    var displayPageNum=6;
    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 ='';



    htmlMap[htmlMap.length]='/';
    postNum++;

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

           
        var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
        timestamp = encodeURIComponent(timestamp1);
        var title = post.title.$t;
                if(thisUrl.indexOf(timestamp)!=-1 ){
                        thisNum = postNum;
                }
       
                postNum++;
                htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;
       
    }

    var banyaknomer = htmlMap.length;
    if (json.feed.entry.length % pageCount == 0){
        var banyaknomer = htmlMap.length -1 ;
        postNum=postNum-1;
    };

       
    for(var p =0;p&lt; banyaknomer;p++){
        if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
            if(fFlag ==0 &amp;&amp; p == thisNum-2){
                if(thisNum==2){
                    upPageHtml = '&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
                }else{
                    upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
                }
       
                fFlag++;
            }
       
            if(p==(thisNum-1)){
                if(p==0){
                    html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
                }else{
                    html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
                }
            }else{
                if(p==0){
                        html += '&lt;td&gt;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';

                }else{
                    html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
                }
            }
       
            if(eFlag ==0 &amp;&amp; p == thisNum){
                downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
                eFlag++;
            }
        }
    }
       
    if(thisNum&gt;1){
        html = ''+upPageHtml+' '+html +' ';
    }
    html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page  ('+(postNum-1)+')   &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
    html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
    html = html2+html;
       
    if(thisNum&lt;(postNum-1)){
        html += downPageHtml;   
    }else{
        html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
    }


       
    if(postNum==1) postNum++;
    html += html3+ '&lt;/div&gt;';
       

    var pageArea = document.getElementsByName(&quot;pageArea&quot;);
    var blogPager = document.getElementById(&quot;blog-pager&quot;);

    if(postNum &lt;= 2){
        html ='';
    }

    for(var p =0;p&lt; pageArea.length;p++){
        pageArea[p].innerHTML = html;
    }


    if(pageArea&amp;&amp;pageArea.length&gt;0){
        html ='';
    }

    if(blogPager){
        blogPager.innerHTML = html;
    }


    }


    function showpageCount2(json) {

    var thisUrl = home_page_url;
    var htmlMap = new Array();
    var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
    thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= '';
    var upPageHtml ='';
    var downPageHtml ='';



    var labelHtml = '&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
    var thisUrl = home_page_url;   

    htmlMap[htmlMap.length]=labelHtml;
    postNum++;

    for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
        var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
        timestamp = encodeURIComponent(timestamp1);

       
        var title = post.title.$t;

                if(thisUrl.indexOf(timestamp)!=-1 ){
                    thisNum = postNum;
                }
       
                if(title!='') postNum++;
                htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;
                   
        itemCount++;
    }

    var banyaknomer = htmlMap.length;
    if (json.feed.entry.length % pageCount == 0){
        var banyaknomer = htmlMap.length -1 ;
        postNum=postNum-1;
    };
       
    for(var p =0;p&lt; banyaknomer;p++){
        if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
            if(fFlag ==0 &amp;&amp; p == thisNum-2){
               
               
               
                if(thisNum==2){
                    upPageHtml = labelHtml +'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
                }else{
                    upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
                }
       
                fFlag++;
            }
       
       
       
       
       
            if(p==(thisNum-1)){
                if(p==0){
                    html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
                }else{
                    html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';               
                }
            }else{
                if(p==0){
                    html = '&lt;td&gt;'+labelHtml+'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';
                }else{
                    html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
                }
            }

       
            if(eFlag ==0 &amp;&amp; p == thisNum){
                downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
                eFlag++;
            }
        }
    }


       
       
    if(thisNum&gt;1){
        if(!isLablePage){
            html = ''+upPageHtml+' '+html +' ';
        }else{
            html = ''+upPageHtml+' '+html +' ';
        }
    }
       
    html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page  ('+(postNum-1)+')   &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
    html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
    html = html2+html;
       
    if(thisNum&lt;(postNum-1)){
        html += downPageHtml;   
    }else{
        html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
    }
       
    if(postNum==1) postNum++;
    html += html3+ '&lt;/div&gt;';
       
    var pageArea = document.getElementsByName(&quot;pageArea&quot;);
    var blogPager = document.getElementById(&quot;blog-pager&quot;);

    if(postNum &lt;= 2){
        html ='';
    }

    for(var p =0;p&lt; pageArea.length;p++){
        pageArea[p].innerHTML = html;
    }

    if(pageArea&amp;&amp;pageArea.length&gt;0){
        html ='';
    }

    if(blogPager){
        blogPager.innerHTML = html;
    }


    }


    </script>

    <script type='text/javascript'>

         var thisUrl = home_page_url;
        if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
            if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
                var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
            }else{
                var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
            }
        }

        var home_page = &quot;/&quot;;
        if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){   
            if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){           
                document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;/script&gt;')
            }else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;/script&gt;')
            }
        }
    </script>

 Warning :

In the code above you can edit this line only :
var pageCount=10;
var displayPageNum=6;
1 : var pageCount = 10;
The Pagecount represents number of posts to be shown in single page. Change the digit to show as many pages you want.
for example :
In my example I have put that value as 10 . In each page you can see only 10 posts .
The number have to same with your setting

The picture show from Setting –> Formatting –> Show –> 10 posts
2 : var displayPageNum = 6;
here the digit 6 represents number of pages to be listed.
For example :
In my example I have chosen 6 , then 6 pages will be shown.

Step 4: Modification Step for Label :

1 : Add Label Gadget (Layout –> page elements –> Add Gadget –> Select Labels)

2 : From Layout –> Edit HTML . Don’t Forget to backup your template (Download Full Template)

3 : Search this
 <a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

change with code below
<script type='text/javascript'>
  var lblname = &quot;<data:label.name/>&quot;;

  lblname2 = encodeURIComponent(lblname);
  var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=10&#39;;
  document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;);
</script>
And Click “save template”

14 comments:

MOTA TM said...

keren.....
tapi sayang bahasa nya inggris.....
g bs baca................

MOTA TM said...

boleh copas g?
drmn u dpt artikel ini, kok sembarang copy aja....

anas urba said...

semakin bagus ja blognya

Cara mengganti IP komputer said...

Good Tutorial sob langsung di coba

Anonymous said...

Blog Mu Keren Banget SOb.....

Artikelnya juga menarik semua, Please kunjungi blog saya juga ya... dan FOLLOW
1. Artikel Unik

2. Artikel Teknologi

3. Free Software

4. Berita Regional dan Internasional

Pokoknya lengkap deh...

akhatam said...

Hmm.. very goood... Tx friend...!

Oktri darmadi said...

:j: info yg bagus nie....

Kumpulan Tutorial Ngeblog said...

mantap Sob... tapi banyak banget yak javascriptnya????

o iya, background petirnya keren Sob...

tukang colong said...

wah saya kurang fasih bahasa ingris..
jadi cuma mampir aja deh..
;)

Seti@wan Dirgant@Ra said...

Tutorial yang mantap
Makasih banyak sobat..

tukang colong said...

aku udah follow blogmu bos..
hehe
;)

Suratman Adi said...

info nya mantap bos,kunjung blk ya ke tmpt ku dan follow.Aq jg dah follow di blog bos. http://suratman-jaya.blogspot.com

Post a Comment

Komentar apa aja sob,mau iklan, mau nyepam mau apa aj boleh,yang penting komentar. Kalau mau follow saya dan konfirmasi, nanti akan sya follow balik, dan jangan kapok berkunjung di blog berat ini !!!

 

read this

traffic rank

paceboox

Recent Post