Mengganti Nextprev dengan Judul Posting

Seperti bunyi paragrap terakhir dalam posting “Tahukah Anda?”, elemen nextprev (blog-pager) dalam Blogger™ dapat diterjemahkan sebagai navigasi yang meliputi ke posting lebih baru, home, & posting lama. Defaultnya, elemen nextprev terletak di akhir seluruh posting pada halaman home & di bawah form komentar pada halaman posting.

Berikut merupakan kode CSS (Cascading Style Sheets) untuk elemen nextprev.

#blog-pager-newer-link {
float:left;
}
#blog-pager-older-link {
float:right;
}
#blog-pager {
text-align:center;
}

Sedangkan markup HTML (HyperText Markup Language) untuk elemen tersebut, dapat ditunjukkan seperti di bawah ini :

    <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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

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

Nah, sekarang bagaimana cara merubah agar tampilan posting lebih baru, home, & posting lama menjadi judul posting? Silakan Anda simak tutorial berikut yang bersumber pada postingan di blog ETBlue.

Langkah Pertama (Primer)

  • Login ke akun blogspot Anda.
  • Pilih Rancangan → Edit HTML.

    Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template Anda yang ada dengan mengklik tulisan “Download Template Lengkap”. Kemudian simpan dalam hardisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan, Anda sudah memiliki back-up untuk mengembalikannya seperti semula.

  • Masukkan script berikut di atas </head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

    Tips : Kalau susah mencarinya, coba tekan tombol F3 atau Ctrl + F di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (firefox), sehingga Anda tinggal memasukkan kata yang ingin dicari.

    Perhatikan pada script jQuery ajax di atas — jika Anda memiliki versi 1.4.4 ke atas — pilih salah satu jQuery dengan versi yang lebih baru.

  • Update (July 01, 2011) — Kemudian tambahkan script berikut di atas </body>, disertai dengan conditional tags.
    <b:if cond='data:blog.pageType == "item"'>
    <script type="text/javascript">
    $(document).ready(function(){ 
    var newerLink = $("a.blog-pager-newer-link").attr("href"); 
    $("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
    var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
    $("a.blog-pager-newer-link").text(newerLinkTitle); 
    }); 
    var olderLink = $("a.blog-pager-older-link").attr("href"); 
    $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { 
    var olderLinkTitle = $("a.blog-pager-older-link").text(); 
    $("a.blog-pager-older-link").text(olderLinkTitle);//rgt 
    }); 
    }); 
    </script>
    </b:if>
  • Simpan template.

Menyembunyikan LinkHome

Tambahkan CSS inline pada kode yang berwarna merah.

    <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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a style="display:none;" class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Langkah Kedua (Sekunder)

Kostumisasi CSS blog-pager

Ketika menampilkan judul posting yang panjang, maka tampilan navigasi nextprev akan berantakan. Bagaimana cara memperbaikinya? Hal itu telah diulas dalam update 19 Pebruari 2010 di blog ETBlue, yakni dengan menmbahkan beberapa atribut dalam CSS blog-pager.

#blog-pager-newer-link,
#blog-pager-older-link {
width: 48%;
}
#blog-pager-newer-link {
text-align: left;
}
#blog-pager-older-link {
text-align: right;
}

Opsional: Anda dapat menambah CSS blog-pager dengan tag berikut:

#blog-pager-newer-link:before {
content:"\2190";
}
#blog-pager-older-link:after {
content:"\2192";
}

Mungkin artinya adalah memasukkan entitas HTML dengan karakter numerik &#8592; (←) sebelum #blog-pager-newer-link dan karakter &#8594; (→) sesudah #blog-pager-older-link.

Langkah Ketiga (Tersier)

Peletakkan nextprev

Dimana posisi yang baik untuk meletakkan blog-pager? Kembali kepada selera masing-masing. Sedangkan menurut saya sendiri, peletakkan nextprev sebaiknya seperti default-nya atau di bawah posting. Kode HTML yang perlu Anda cari adalah sebagai berikut.

<b:if cond='data:blog.pageType != "item"'>
<b:include name='nextprev'/>
</b:if>

Tambahkan conditional tag (warna hijau), seperti yang tampak pada kode di atas. Selanjutnya copas (copy & paste) kode tersebut tepat di atas kode berikut. Jangan lupa untuk mengganti conditional tag.

<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
</b:if>
        <b:if cond='data:blog.pageType == "static_page"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <b:include data='post' name='comment_picker'/>
        </b:if>

Simpan template & sekarang blog-pager Anda telah berpindah di atas komentar, jika pengguna mengunjungi halaman artikel/posting tertentu. Untuk memperbaiki tampilannya, Anda tinggal melakukan improvisasi pada kode CSS blog-pager.

Mengganti blog-pager dengan tag Paragraf

Apabila ingin membuat tampilan yang berbeda, Anda bisa melakukan beberapa kostumisasi, seperti pada ulasan di bawah ini:

CSS untuk blog-pager.

#blog-pager {
text-align:left;
}
p.blog-pager-newer-link,
p.blog-pager-older-link {
margin:0;
}

HTML untuk blog-pager.

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <p class='blog-pager-newer-link'>Posting terbaru: 
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </p>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <p class='blog-pager-older-link'>Posting lama: 
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </p>
    </b:if>

    <a style="display:none;" class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Kode yang berwarna merah merupakan markup yang dicari & warna hijau merupakan markup yang telah diganti dengan tag paragraf (<p>).

Anda dapat juga melakukan kostumisasi navigasi nextprev dengan beberapa variasi lainnya. Mohon maaf, posting ini tidak disertai dengan gambar. Versi demo dapat Anda lihat pada navigasi nextprev di Optimasi-Blog.

47 komentar untuk “Mengganti Nextprev dengan Judul Posting”

  1. Wohooo makasih tutornya :D
    Udah saya terapkan di blog saya dan sukses :D

    BalasHapus
  2. This is a new inspiration for all the people. It was incredible. thanks for sharing. do not forget your visit to my blog to give me a critique and commentary. I am happy to exchange information and knowledge with you. success for you. by: renra cikatos

    BalasHapus
  3. wah bagus nich... dah di coba tadi kang berhasil :) thx ya kang...

    BalasHapus
  4. maaf mas kalau tutorial tersebut dipake di wordpress bisa ngga ?

    BalasHapus
  5. obatherbal:
    Bisa pake wordpress..

    Komen:
    Ane belum coba,,dah lama ga utak-utak blogspot..jadi pingin coba bro..

    BalasHapus
  6. obatherbal:
    Oh, kalu di pake di wp ga bisa..loe gimana gan,,nih kan bahas blogspot..conditional aja dah beda,,

    BalasHapus
  7. wah, kalau udah nyangkut masalah edit HTML emang bikin bingung ya. tapi tutorial ini bagus!
    keep blogging bro. :)

    BalasHapus
  8. @obat-alternatif.com:
    Betul, gan. Trik ini khusus untuk blogger (blogspot).

    @obatherbal:
    Saya rasa di wordpress sudah ada pluginnya, gan (sok tahu…). Ntar, kalau masalah di wp yang bisa jawab mas Rudy. :)

    @Hendro Prayitno:
    Makanya, bang jangan pamit duluan dari blogspot. :) Ngomong-ngomong server yang di Discrimate sering down yah bang server-nya.

    BalasHapus
  9. mantap tipsnya kang sukses ya..

    BalasHapus
  10. @OB
    iya,,niatnya gw pingin pindah...ntar aje kl dah di surabaya..hehe

    Di wp ga perlu pake plugin..blog gw yang skr di wp pluginnya cuma disqus..hehe

    BalasHapus
  11. sangat bermnfaat nih...

    mksih ya buat info nya..

    salam kenal.. :)

    BalasHapus
  12. oh jadi untuk wordpress gk bisa ya ?

    BalasHapus
  13. masukan bagus dan menarik,, langsung saya terapkan ,sangat bermanfaat sekali,makasih dan sukses trus,,,

    BalasHapus
  14. sayang nih di wordpress nya ga bisa,,,

    BalasHapus
  15. Waduh kalau bacabaca tentang bahasa HTML jadi muter deh kepala ane,bisa sehari lupa makan kalau sambil di praktekkin.

    BalasHapus
  16. wachhh rinci banget penjelasannya,,
    makasi ya udah mau share infonya

    BalasHapus
  17. bagus banget ni infonya,sangat bermanfaat
    salam kenal semuanya

    BalasHapus
  18. owh jadi gitu ya caranya,,, sip dech biar saya coba klo gitu...

    BalasHapus
  19. ribet juga ya.tapi demi membuat blog menjadi SEO friendly segala cara dilakukan.thanks infonya.

    BalasHapus
  20. gan punya tutorial wordpress gx??

    BalasHapus
  21. @xamthone plus:
    Alhamdulillah, belum ada gan. Saya tidak pernah membuat blog di wordpress.
    Coba agan kunjungi Blog Rudy Azhar, dia salah satu admin blog ini. Dan sudah lama bergelut dengan “wordpress”.

    BalasHapus
  22. penjelasannya sangat lengkap sekali,,,jadi nambah ilmu ,makasih,,

    BalasHapus
  23. Kang ini Demo nya mana?kok saya cari tulisan di Nextprevenggak ada si kang?waduh saya penasaran mau lihat demo nya dulu,oh iya kang > http://optimasi-blog.blogspot.com/2011/03/membuat-menu-navigasi-image.html < gambar menu navigasi nya enggak ada yang bewarna putih?soalnya blog ane warna hitam jadinya menu navigasi nya enggak kelihatan,mohon dibantu

    BalasHapus
  24. @Boy :
    Jika demo di Optimasi Blog, Agan akan lihat nextprev-nya setelah mengklik salah satu posting. Letaknya tepat di atas “Posting Lain yang Terkait”.
    Atau agan bisa lihat di sini Sapangguringan—Dummy World, letaknya di antara posting dan komentar.

    Mengenai Menu navigasi image, agan bisa cari image-nya di Google—gambar/image atau IconFender. Nah, pilih gambar yang sesuai dengan kebutuhan agan. Kemudian ganti alamat image dalam kode HTML navigasi image.

    BalasHapus
  25. ough begitu ya cara mengganti'y,,,
    penjelasan'y mantap nih gan

    BalasHapus
  26. oke jg nih artikel'y sangt bermnfaat sekli bwt saya, krg jdi tahu deh cara'y.........

    BalasHapus
  27. @ Ob : Masih belum ngerti kang sama yang namanya Nextprev ? (Maklum kang baru nge-blog lagi)Oh iya kang cara bikin ini gimana? > http://img232.imageshack.us/img232/2427/gb4x.png ? Mohon dibantu lagi kan ^O^ oh iya satu lagi bikin nih tulisan disamping kotak komentar gimana caranya? >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    BalasHapus
  28. thx y Tutorial nya sangt bermanfaat buat saya
    good luck always Gan

    BalasHapus
  29. Wah info artikel yang menarik nih sob, thanks yah...

    BalasHapus
  30. Wah mantap nih sob, kebetulan aku juga punya blogspot, jadi bisa langsung dipraktekin nih... Thanks ya sob...

    BalasHapus
  31. post yang sangat bermanfaat
    terus lanjutkan berbagi
    hehe

    BalasHapus
  32. tutorialnya
    lengkap banget ni gan

    BalasHapus
  33. Menarik mas.. bermanfaat untuk mengurangi bounce rate dan ningkatkan CTR mantap. terasa wordpress banget..hehe :) thanks ya..

    BalasHapus
  34. mmzz,,sangat bermanfaat.
    makasih ya udah share.

    BalasHapus
  35. Makasih gan aku coba nih tipsnya...

    BalasHapus
  36. kunjungan...
    thank infonya mas...
    salam kenal dan visit back ya..
    --------------------------------------
    iPayMu.com Pembayaran Online Indonesia

    BalasHapus
  37. gan kalo cara ganti 'posting lama' jadi tulisan 'next 1 2 3...last' gimana?

    BalasHapus
  38. @Dukun Design:
    Kalau agan ingin mengganti dengan “next 1 2 3...last” harus pakai widget page navigation.
    Untuk cara-caranya, agan bisa mengunjungi alamat ini Abu Farhan.com

    BalasHapus
  39. Akhirnya saya menemukan jawabannya di sini..terima kasih Om.. :D

    BalasHapus
  40. thanks bro artikelnya langsung di coba ah :)

    BalasHapus
  41. Hasilnya ntar seperti dibawah template ini ya ?
    keren banget, trim infonya

    BalasHapus
  42. keren banget ni tutorialnya, langsung deh dipraktekkan

    BalasHapus
  43. Butuh otak yg fresh utk mengikuti tutorial ini, kalau tidak, pasti bingung :)

    BalasHapus