Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Sabtu, 03 Juli 2010

Memasang Page Navigasi Dengan Mudah

Kategori :
Memasang Page Navigasi adalah salah satu widget yang membuat blog kita visitor friendly karena dengan menggunakan Page Navigasi pengunjung dapat melihat postingan terdahulu dengan mudah tanpa harus melihat dahulu satu-satu dan menurut artikel yang saya baca sih , Page Navigasi ini membuat template kita seo friendly juga, kalau soal seo friendly kembali ke diri sobat masing-masing karena saya tidak mengerti yang namanya seo .


Sebenarnya trik blog tentang Memasang Page Navigasi saya buat karena ada yang request dari salah satu teman blogger, dia mengirimkan pesan ke email saya. Memang request tentang trik blog atau tentang mempercantik blog itu yang request banyak banget jadi maaf kalau yang lagi request ke oketrik belum di berikan, sobat harus sabar karena saya kerja hanya sendiri tanpa ada admin yang lain . Oke sekarang kembali ke topik, eh langsung aja yuk ke caranya.
  1. Seperti biasa login ke blogger

    Memasang Page Navigasi Dengan Mudah
  2. masuk ke Rancangan (dulunya tata letak) >> Elemen Halaman (tidak usah di cari karena biasanya apabila sudah mengklik Rancangan sobat sudah berada pada halaman tersebut)

    Memasang Page Navigasi Dengan Mudah
  3. Setelah itu tambahkan sebuah gadget (tambahkan saja di sidebar)

    Memasang Page Navigasi Dengan Mudah
  4. Setelah itu pilih yang HTML/Javascript

    Memasang Page Navigasi Dengan Mudah

    Memasang Page Navigasi Dengan Mudah
  5. Setelah itu masukan kode di bawah ini ke dalamnya


    <style>
    .showpageArea a {
    text-decoration:underline;
    }

    .showpageNum a {
    text-decoration:none;
    border: 1px solid transparent;
    margin:0 3px;
    padding:3px;
    }

    .showpageNum a:hover {
    border: 1px solid transparent;
    background-color:#bbb;
    }
    .showpagePoint {
    color:#fff;
    text-decoration:none;
    border: 1px solid transparent;
    background: #000;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid transparent;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#333;
    }

    </style>

    <script type="text/javascript">

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
    var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
    var isPage = thisUrl.indexOf("/search?updated")!=-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 ='';

    /*-bagian ini bisa sobat atur, sesuai keinginan sobat/*
    var pageCount=3;
    var displayPageNum=3;
    var firstPageWord = 'Awal';
    var endPageWord = 'Akhir';
    var upPageWord ='Sebelumnya';
    var downPageWord ='Selanjutnya';
    /*Akhir/*

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

    for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage){
    if(title!=''){
    if(post.category){
    for(var c=0, post_category; post_category = post.category[c]; c++) {
    if(encodeURIComponent(post_category.term)==thisLable){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    postNum++;
    htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    }
    }//end if(post.category){

    itemCount++;
    }

    }else{
    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+'T00%3A00%3A00%2B08%3A00&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){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +'</a></span>';
    }else{
    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 += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+'1</a></span>';
    }else{
    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++;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    }//end for(var p =0;p< htmlMap.length;p++){

    if(thisNum>1){
    if(!isLablePage){
    html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
    }else{
    html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
    }
    }

    html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

    if(thisNum<(postNum-1)){
    html += downPageHtml;
    html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
    }

    if(postNum==1) postNum++;
    html += '</div>';

    if(isPage || isFirstPage || isLablePage){
    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 src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
  6. setelah itu simpan
  7. eits ini belum selesai, sekarang drop/pindahkan widget tersebut ke bawah elemen post

    Memasang Page Navigasi Dengan Mudah

  8. setelah itu simpan dan sobat bisa lihat hasilnya.
Bagaimana, mudah dan simple bukan? Mungkin trik ini sudah banyak sekali yang menjelaskannya, namun tidak ada salahnya kalau saya bagikan? toh trik disini walaupun judulnya sama dengan yang lain tapikan langkah memasang/membuatnya berbeda, betul tidak ? Sekarang saya pamit dulu, sampai ketemu di post berikutnya oke sob. Terima kasih dan Happy Blogging .

Navigasi lainnya :
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

11 Komentar untuk Memasang Page Navigasi Dengan Mudah

@Naruto Manga Komik Bahasa Indonesia >> gambar yang paling atas itu Demonya kang...

nice posting kawan!!!lumayan ane jd nambah ilmu lg neh!!!
salam knl kawan!!!
sukses slalu

kembali dengan tutorialnya yang mangtab mas, terima kasih, izin simpan codenya mas...

wah... oketrik emang okeee lah kalo begitu..
izin copas source nya ya sob....

makasi infonya, kebetulan saya udah makek tapi pake yang bentuknya beda,hehe

ini dia . . . semoga berhasil . . .'
ane gagal terus setiap buat navigasi num . . . . .

hmmm. baru aja dicoba.
tapi ini harus sesuai sama jenis sidebar template ya?
nice posting. tapi sayang gabisa diaplikasikan di blog saya :)

@nurul sora >> untuk diaplikasikan di template mana aja bisa kok, asalkan kamu tahu id elemen tersebut dan biasanya sih klo sidebar rata-rata id-nya itu #sidebar atau #sidebar-wrapper (id yang biasa saya temui di template para blogger)

tips yang bagus
saya coba deh...

nice..nice..nice..