Monday, June 24, 2013

Ganti Newer Post Dan Older Post Dengan Judul Postingan

Ditampilan default template Blogspot ada link yang tulisannya Newer Post, Home, dan Older Post - tepatnya kalau nggak salah di bawah kotak komentar atau di atas footer.

Dengan cara di bawah ini kita bisa mengganti kata Newer Post dan Older Post dengan judul postingan.

Berikut langkah-langkahnya:

  1. Pasang jQuery di template.
    • Masuk kedalam Edit HTML template.
    • Cari </head>, bisa gunakan Ctrl+F buat menemukannya.
    • Tambahkan SCRIPT di bawah ini setelah </head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
      </script>
      
  2. Tambahkan kode.
    • Masuk ke Layout
    • Klik Add a Gadget > HTML/Javascript.
    • Copy kode di bawah, paste di widget HTML/Javascript, simpan perubahannya.
      <style type="text/css">
      #blog-pager-newer-link {
      font-size: 100%;
      width: 250px;
      text-align: left;
      }
      #blog-pager-older-link {
      font-size: 100%;
      width: 250px;
      text-align: right;
      }
      </style>
      

      Buat ukuran huruf di FONT-SIZE, kelurusan huruf di TEXT-ALIGN, dan lebarnya di WIDTH kita bisa ubah sesuai selera.

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

Catatan: Jika jQuery sudah terinstall di template, langkah nomor 1 tidak di gunakan, lewati saja dan langsung ke langkah nomor 2.