DTE :]

Tuesday, January 1, 2013

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>
Data Keterangan Tampilan/Contoh Tampilan
data:newerPageUrl Indikator 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:olderPageUrl Indikator 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:newerPageTitle Elemen ini akan menampilkan teks navigasi menuju halaman/posting yang lebih baru Posting Lebih Baru, Newer Post
data:olderPageTitle Elemen ini akan menampilkan teks navigasi menuju halaman/posting yang lebih lama Posting Lama, Older Post
data:widget.instanceId [?] Blog1
data:blog.homepageUrl [?] http://nama_blog.blogspot.com/
data:homeMsg Elemen ini akan menampilkan teks navigasi ke halaman awal. Beranda
data:mobileLinkUrl Kode 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:desktopLinkUrl Kode 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:mobileLinkMsg Elemen ini akan menampilkan teks navigasi menuju blog tampilan seluler. Lihat versi seluler
data:desktopLinkMsg Elemen ini akan menampilkan teks navigasi menuju blog tampilan web/desktop. Lihat versi web

Labels: , ,

9 Comments:

  • Ini yang saya cari :)

    By Blogger budkalon, at Thursday, January 3, 2013 at 5:29:00 PM GMT+7  

  • 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

    By Blogger True Blue, at Monday, January 7, 2013 at 2:24:00 PM GMT+7  

  • 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">

    By Blogger Fajrin, at Monday, May 5, 2014 at 2:11:00 AM GMT+7  

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

    [img]http://1.bp.blogspot.com/--y-6JxL4HK4/U2d1mqGWGfI/AAAAAAAAIig/7qnHTjLSYnI/s1600/2014-05-05_091326.png[/img]

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

    By Blogger Taufik Nurrohman, at Monday, May 5, 2014 at 6:29:00 PM GMT+7  

  • 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.

    By Blogger Fajrin, at Monday, May 5, 2014 at 10:23:00 PM GMT+7  

  • 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.

    By Blogger Taufik Nurrohman, at Tuesday, May 6, 2014 at 7:54:00 PM GMT+7  

  • sangat membantu bagi saya yang baru belajar blogspot

    By Blogger Zalmin, at Wednesday, April 8, 2015 at 12:13:00 AM GMT+7  

  • 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

    By Blogger Kang Mousir, at Sunday, January 6, 2019 at 1:56:00 AM GMT+7  

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

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

    By Blogger Taufik Nurrohman, at Thursday, January 17, 2019 at 2:48:00 PM GMT+7  

Post a Comment



<< Home