Mengubah Navigasi Posting Lama/Posting Baru menjadi Berikutnya/Sebelumnya

Sebelum memasuki langkah perombakan, paling tidak kamu harus mengerti terlebih dahulu mengenai tiporafi navigator halaman blogspot. Berikut ini adalah contohnya (yang hanya bisa kamu lihat setelah kamu mengecek Expand Template Widget):

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

Seluruh kode di atas merupakan kerangka objek (sebut saja begitu) dari sebuah navigator halaman. Kode yang Saya beri warna biru mewakili navigasi Posting Lebih Baru, kode yang Saya beri warna merah mewakili navigasi Posting Lama, sementara kode yang Saya beri warna hijau mewakili navigasi Beranda yang umumnya disisipkan di tengah navigator.
Karena template blogspot berbasis XML, maka kamu tidak akan menemukan teks bertuliskan "Posting Lama" atau "Posting Lebih Baru" di dalamnya. XML adalah sistem perwakilan. Wujudnya hanya berupa tag yang nilainya akan berubah sesuai dengan setting dalam dasbor blogmu.

Logikanya begini: Saat kamu mengubah setting bahasa antar muka menjadi bahasa Inggris, maka secara otomatis elemen navigasi Posting Lama dan Posting Lebih Baru akan berubah menjadi Older Post dan Newer Post.
Tag-tag XML tersebut bisa Saya kategorikan seperti ini:

KodePerwakilan
<data:newerPageTitle/>Mewakili Posting Lebih Baru
<data:olderPageTitle/>Mewakili Posting Lama
<data:homeMsg/>Mewakili Beranda

Untuk mengubah Posting Lama, Posting Lebih Baru dan Beranda, caranya cukup dengan mengganti kode-kode tersebut saja menjadi seperti ini:

<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'>Berikutnya</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'>Sebelumnya</a>
            </span>
        </b:if>
        <a class='home-link' expr:href='data:blog.homepageUrl'>Halaman Depan</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>

Sekarang kamu bisa menyimpantemplatemu.

blog pager berikutnya sebelumnya

10 Komentar

  • Dwie AZzahra

    mas aku mau tanya diblog ku kenapa nggak ada navigasi berikutnya, pas dibagian Home, aku liat dibawah nggak ada, tapi pas aku buka salah 1 postingan aku baru ada, tolong ya mas dibantu...

  • Muhammad A Vip

    saya takut kalo urusan sama kode beginian, belum biasa

  • Taufik Nurrohman

    @Dwie AZzahra: Sistem efisiensinya memang begitu. Coba pikir: Saat di halaman muka bukankah yang kamu lihat adalah posting terbaru? Untuk apa templatemu repot-repot mencantumkan navigasi Posting Lebih Baru jika ketika diklik tidak akan pergi ke mana-mana? Posting terbaru adalah posting yang paling awal, jadi tidak akan ada posting lagi di depannya. Itu adalah salah satu fungsi tag kondisional <b:if cond='data:newerPageUrl'>

  • Dwie AZzahra

    makasih mas udah bisa..!!

  • Unknown

    masBRO ane mau tanya kok tombol ane yg ini(berikutny, home, sebelumny) itu kok berupa buton bukan image(berbentuk buton coba liat deh blog ane) trus kepingin ane rubah jadi text gmna tu??? bisa d share k kotak komentar ane :)

  • Andi AF Studio

    yeeeeeeeezzzzz... sukses.. bisa bisa bisa :D

  • IRIL SAGITA

    Malam kak, aku mau tanya, kalau expr:title='data:newerPageTitle' diganti dengan judul postingan selanjutnya gimana caranya, saat ini yang tampil kan halaman berikutnya ato posting lama, mohon pencerahannya ?

    • Taufik Nurrohman

      Pakai JavaScript. Cari saja di Google. Ada banyak tutorialnya.

      • Unknown

        Mantap.....bisa ditambah, makasih Bang...

  • Admin

    kalo navigasinya dipisah dari posting gmana caranya mas?

Komentar telah ditutup.