XHTML Blogger, Navigasi Halaman/Blog Pager

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>
DataKeteranganTampilan/Contoh Tampilan
data:newerPageUrlIndikator untuk menyatakan bahwa terdapat posting yang lebih baru sebelum posting/daftar posting yang sedang aktif/terlihat di halaman. Pada intinya, kondisi ini digunakan untuk memunculkan navigasi Posting Lebih Baru saat diperlukan dan akan menyembunyikannya saat tidak diperlukan —misalnya, saat kita sedang berada di halaman muka, kita tidak akan melihat navigasi Posting Lebih Baru. Elemen/data ini juga berfungsi untuk menampilkan URL halaman (saat sedang berada di halaman indeks) atau URL posting (saat sedang berada di halaman item) yang lebih baru dari halaman yang sedang aktif.http://nama_blog.blogspot.com/search?updated-max=2012-12-21T16:36:00%2B07:00&amp;max-results=2
data:olderPageUrlIndikator untuk menyatakan bahwa terdapat posting yang lebih lama setelah posting/daftar posting yang sedang aktif/terlihat di halaman. Kondisi ini digunakan untuk memunculkan navigasi Posting Lama saat diperlukan dan akan menyembunyikannya saat tidak diperlukan —saat kita sedang berada di halaman terakhir, maka kita tidak akan melihat navigasi Posting Lama). Elemen/data ini juga berfungsi untuk menampilkan URL halaman (saat sedang berada di halaman indeks) atau URL posting (saat sedang berada di halaman item) yang lebih lama dari halaman yang sedang aktif.http://nama_blog.blogspot.com/search?updated-max=2012-12-21T16:36:00%2B07:00&amp;max-results=2&amp;reverse-paginate=true
data:newerPageTitleElemen ini akan menampilkan teks navigasi menuju halaman/posting yang lebih baruPosting Lebih Baru, Newer Post
data:olderPageTitleElemen ini akan menampilkan teks navigasi menuju halaman/posting yang lebih lamaPosting Lama, Older Post
data:widget.instanceId[?]Blog1
data:blog.homepageUrl[?]http://nama_blog.blogspot.com/
data:homeMsgElemen ini akan menampilkan teks navigasi ke halaman awal.Beranda
data:mobileLinkUrlKode ini akan menggenerasikan URL blog versi seluler berdasarkan URL yang sedang aktif (lebih tepatnya, kode ini akan menghasilkan nilai yang sama dengan data:blog.url dengan akhiran berupa ?m=1).http://nama_blog.blogspot.com/?m=1
data:desktopLinkUrlKode ini akan menggenerasikan URL blog versi desktop berdasarkan URL yang sedang aktif (lebih tepatnya, kode ini akan menghasilkan nilai yang sama dengan data:blog.url dengan akhiran berupa ?m=0).http://nama_blog.blogspot.com/?m=0
data:mobileLinkMsgElemen ini akan menampilkan teks navigasi menuju blog tampilan seluler.Lihat versi seluler
data:desktopLinkMsgElemen ini akan menampilkan teks navigasi menuju blog tampilan web/desktop.Lihat versi web

10 Komentar

  • budkalon

    Ini yang saya cari :)

  • True Blue

    Kang Taufik, saya mau nanya maaf kalau out topic. Blog ini punya Kang Taufik bukan?
    http://idtutorplus.blogspot.com saya harap bukan, soalnya saya lihat di blog roll nggak ada blog kang Taufik yg lain, isinya blognya kang onk semua, itu yang suka kloning template orang

  • Lalu Abd Rahman

    Seluruh kode ini ditujukan untuk DIPELAJARI, DIPAHAMI, DIKEMBANGKAN
    dan DIGUNAKAN untuk sesuatu yang LEGAL, sesuatu yang PRIBADI dan GRATIS,
    dan tidak seharusnya digunakan dengan cara yang instan: salin dan tempel,
    serta tidak seharusnya digunakan untuk membuat diri Anda menjadi mirip
    (atau bahkan sama) dengan orang lain; untuk menjatuhkan orang lain,
    untuk memenuhi nafsu pencitraan diri, kebanggaan palsu dan/atau komersialisasi.

    Taufik Nurrohman

  • Fajrin

    Permisi mas, saya mau menanyakan mengenai navigasi bernomor pada Blog saya.
    Saya ingin lebih memperingan navigasinya. Tapi, setelah saya menghapus kode ini mengapa JQuery nya macet semua ya pada homepage ? Kalau sudah pada halaman label / posting JQuery sidebar dll. work. Mohon bantuannya Mas, terimakasih.

    Seperti ini kode navigasi bernomornya (kurang lebih) maaf cuman sebagian karena tidak cukup Mas.
    //<![CDATA[
    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">

  • Taufik Nurrohman

    Coba cek di console pasti ada keluar kode-kode kesalahan:

    CTRL + Shift + J untuk Google Chrome, atau CTRL + Shift + K untuk Firefox.

  • Fajrin

    Akhirnya saya sudah menemukan masalahnya Mas.
    Sebelumnya saya menerapkan Render-Blocking Javascript Dari Jquery. setelah saya hilangkan
    async='async' yang terselipkan pada jquery ajax libs 1.10.2
    Dan menghilangkan kode-kode navigasi tsb jadi work semua akhirnya. tapi, dampaknya di page speed insights anjlok drastis Mas.
    Apakah ada tips untuk menaikkannya kembali Mas ? terimakasih atas semua jawabannya :)
    Mohon maaf jika merepotkan.

  • Taufik Nurrohman

    Tidak apa-apa asalkan halaman sudah bisa terbebas dari error. Itu artinya bagian-bagian yang membebani dapat dipertanggungjawabkan. Alias, memang sudah selayaknya proses muat halaman jadi seberat itu. Misal, Google+ itu berat, tapi nyatanya jarang ada yang komplain. Karena memang sudah selayaknya seberat itu.

    Kalau mau lolos Google Page Speed Insight ya buat saja tema yang sederhana.

  • Zalmin

    sangat membantu bagi saya yang baru belajar blogspot

  • Kang Mousir

    Apakah blogger memungkinkan untuk meletakkan navigasi blog berada diluar bagian main widget? Maksudnya berada di luar kode yang ada dibawah ini
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
    ....
    </b:widget>
    </b:section>

    Saya ingin membuat layout seperti ini
    <div id='outer-wrapper'>
    <div id='content-wrapper'
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
    ...
    </b:widget>
    </b:section>
    </div>
    <div id='sidebar-wrapper'>
    ......
    </div>
    </div>
    <div id='nav-blog'>
    ......
    </div>
    </div>

    Yang saya pahami bahwa navigasi blog hanya bekerja ketika berada dalam main widget. Apakah mungkin kita bisa memanipulasinya agar mendapatkan layout seperti yang saya inginkan?

    Maaf komentarku panjang, saya hanya penasaran dan ingin membuat layout yg berbeda haha

  • Taufik Nurrohman

    Coba begini mas, terus di dalamnya ditambahkan widget bertipe LinkList:

    <b:section class='nav' id='nav-blog'> … </b:section>

Komentar telah ditutup.