Rizal saputra

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′ 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+'&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< banyaknomer;p++){
        if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
            if(fFlag ==0 && p == thisNum-2){
                if(thisNum==2){
                    upPageHtml = '<a href="/"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
                }else{
                    upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
                }

                fFlag++;
            }

            if(p==(thisNum-1)){
                if(p==0){
                    html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
                }else{
                    html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
                }
            }else{
                if(p==0){
                        html += '<td><a href="/"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';

                }else{
                    html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
                }
            }

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

    if(thisNum>1){
        html = ''+upPageHtml+' '+html +' ';
    }
    html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+')   </td><td class="b">';
    html3 = '</tr></tbody></table>';
    html = html2+html;

    if(thisNum<(postNum-1)){
        html += downPageHtml;
    }else{
        html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
    }


    if(postNum==1) postNum++;
    html += html3+ '</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 = '<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
    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+'&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< banyaknomer;p++){
        if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
            if(fFlag ==0 && p == thisNum-2){



                if(thisNum==2){
                    upPageHtml = labelHtml +'<span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
                }else{
                    upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
                }

                fFlag++;
            }





            if(p==(thisNum-1)){
                if(p==0){
                    html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
                }else{
                    html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
                }
            }else{
                if(p==0){
                    html = '<td>'+labelHtml+'<span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';
                }else{
                    html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
                }
            }


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



    if(thisNum>1){
        if(!isLablePage){
            html = ''+upPageHtml+' '+html +' ';
        }else{
            html = ''+upPageHtml+' '+html +' ';
        }
    }

    html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+')   </td><td class="b">';
    html3 = '</tr></tbody></table>';
    html = html2+html;

    if(thisNum<(postNum-1)){
        html += downPageHtml;
    }else{
        html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
    }

    if(postNum==1) postNum++;
    html += html3+ '</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 && thisUrl.indexOf(".html")==-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>

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 = "<data:label.name/>";

lblname2 = encodeURIComponent(lblname);
var feedlink = '/search/label/' + lblname2+'?&max-results=10';
document.write('<a href="' + feedlink + '">'+lblname+'</a>');
</script>

And Click “save template”

Refresh berfungsi untuk membuat “penyegaran” kembali halaman blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet, yang berbeda haya fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol refresh yang ada pada tool bar.

Untuk membuatnya cukup dengan hanya membubuhkan script di bawah ini :

<meta content="10" http-equiv="refresh"/>

Untuk template klasik cukup dengan kode diatas, tapi untuk template baru harus memakai tag penutup yakni , kodenya jadi seperti di bawah :

<meta content="10" http-equiv="refresh"></meta>

Simpan kode di atas dibawah <HEAD>
sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.kalau milik saya saya terapkan 3600 detik

Fungsi refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan.

Agar lebih jelas, saya ambil salah satu contoh. Bila anda sudah lama nge blog, dan setelah sekian lama kemudian anda membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.

Fungsi Redirect ini bisa di buat dengan kode :

<meta content="0;URL=tulis alamat URL tujuan di sini" http-equiv="refresh"></meta>--> khusus template baru harus pake kode penutup
Selamat Mencoba

Fanbook

Labels

Followers

Page navigation with google style for blogger

Memodifikasi pesan dibawah posting

Cara membuat efek refresh dan redirect di blog

Efek Link: Link Terbuka Tanpa Di Klik

Recent Post

mampir

Popular Posts

My Blog List

Recent comment

read this

traffic rank

paceboox

Recent Post