Membuat Blog Pager Menjadi Judul Posting

Membuat Blog Pager Menjadi Judul Posting - Nextprev atau Blog Pager dengan merubah tulisan posting lama dan posting baru menjadi judul posting, yang merupakan alat navigasi posting untuk halaman sebelum, halaman selanjutnya dan beranda, tujuannya supaya pengunjung bisa mengintip dan mengetahui topik bahasan pada halaman sebelum dan selanjutnya.

Ada beberapa gaya yang bisa ditampilkan untuk sebuah blog pager, baik itu gaya blog pager melayang ataupun modifikasi blog pager dengan gambar, yang kesemuanya itu bisa kita tuangkan untuk sebuah tampilan yang sesuai dengan keinginan dengan menyesuai desain blog yang kita miliki.

Untuk modifikasi blog pager dari tulisan posting lama dan posting baru diubah menjadi tulisan berupa judul posting untuk posting sebelum dan judul posting selanjutnya, langkahnya sebagi berikut:

Markup HTML untuk blog pager adalah:

HTML

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

dan CSS-nya adalah:

CSS

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

• Masukan script berikut ini diatas </head>
  
  

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

  
  
  jika sudah ada script jQuery tadi ataupun sudah ada yang lebih baru, tidak perlu menambahkan cukup 1 saja script jQury tersebut.
• Kemudian tambahkan script berikut ini di atas tag </body>
  
  
  JavaScript

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

• Untuk memperbaiki tampilan kita ubah CSS-nya menjadi seperti ini:
  
  
  CSS

  #blog-pager-newer-link,
  #blog-pager-older-link {
    width: 47%;
  }
  #blog-pager-newer-link {
    text-align: left;
  }
  #blog-pager-older-link {
    text-align: right;
  }
  .home-link {
    display:none
  }
  #blog-pager-newer-link:before {
    content:"\261C";
  }
  #blog-pager-older-link:after {
    content:"\261E";
  }

Penempatan navigasi nextprev sebaiknya dibawah posting dengan mengetahui tag nextprev seperti ini <b:include name='nextprev'/> dan sebaiknya tambahkan tag kondisional untuk hanya tampil pada halaman post saja, sehingga menjadi berikut ini:

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

dan letakan diatas kode berikut ini sehingga menjadi seperti ini:

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

Default posisi peletakan navigasi nextprev berada dibawah komentar, setelah melakukan perubahan seperti diatas, posisi nextprev akan berada diatas komentar atau tepatnya dibawah postingan.

Simpan template

Semoga bermanfaat.