Cara Meletakkan Navigasi Blogspot di bawah Artikel

Setelah agak lama tidak menuliskan artikel baru. Kali ini saya mencoba menjelaskan bagaimana cara meletakkan navigasi blogspot setelah artikel. Sebenarnya cara ini tidak terlalu sulit hanya perlu memperhatikan dimana tag penutup pada bagian postingan serta mengetahui struktur navigasi pada blogspot. Pada umumnya navigasi tersebut ada pada widget Blog1 dan didalam tag includable dengan id='nextprev' dengan cara memanggilnya yaitu dengan <b:include name='nextprev'/>. Tapi jika kita akan memindahkannya dibawah posting/artikel cara pemanggilanya kita abaikan. Karena kita akan membuat srtuktur yang baru agar lebih menarik. Mungkin sudah cukup penjelasannya dan langsung kepraktek saja.

1

Tahap pertama yang perlu dilakukan yaitu membungkus navigasi yang sudah ada dengan tag kondisional selain item posting dan halaman. Ini perlu dilakukan agar nantinya pada postingan navigasinya tidak muncul dua kali. Caranya yaitu cari <b:include name='nextprev'/> didalam template lalu ganti dengan:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:include name='nextprev'/>
</b:if></b:if>

2

Tahap kedua yaitu meletakkan code navigasi setelah tag penutup artikel/posting. Penutupnya ini yang agak sulit untuk ditemukan. Biasanya terdapat sebelum kode komentar. Coba cari <b:includable id='comment_picker' var='post'> di atasnya terdapat </b:includable> dan kode navigasi yang baru akan diletakkan sebelumnya. karena kalau diluar </b:includable> akan error. Kodenya sebagai berikut.

123456789101112131415<div class='blog-pager' id='blog-pager'>
 <div class='pager-isi'>
    <b:if cond='data:newerPageUrl'>
          <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>
<b:else/>
<span class='linkgrey left'><h6>Next</h6><h5>Ini merupakan artike terbaru .</h5></span>
         </b:if>

    <b:if cond='data:olderPageUrl'>
       <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>
<b:else/>
<span class='linkgrey right'><h6>Previous</h6><h5>Ini merupakan artikel terakhir.</h5></span>
       </b:if>  
 </div>
  </div>

Pada kode tersebut sudah saya tambahkan sedikit kode agar pada kondisi artikel terbaru dan terkhir terdapat kata yang menunjukkan bahwa itu merupakan artikel yang baru atau paling akhir. Nah scriptnya bisa saja sampai disitu tapi tulisan yang muncul hanya older post atau Newer Post. Tapi jika ingin menampilkan judul dari artikel maka harus lanjut tahap berikutnya.

3

Tahap Ketiga ini yaitu penambahan javascript/jQuery untuk merubah tulisan older post/newer post dengan judul postingannya. Kodenya sebagai berikut:

12345678910111213141516<script type='text/javascript'>
//<![CDATA[
$(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').html('<h6>Next</h6><h5>' + newerLinkTitle + '<h5>');
    });
    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').html('<h6>Previous</h6><h5>' + olderLinkTitle + '</h5>');
    });
});
//]]>
</script>

NB: Kode tersebut diatas harus dibungkus dengan tag kondional hanya pada item karena navigasi ini diharapkan hanya muncul pada artikel di item dan bukan di halaman, homepage, label, arsip, dan halaman error. Jadi kode lengkapnya seperti dibawah:

12345678910111213141516171819202122232425262728293031323334<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
 <div class='pager-isi'>
    <b:if cond='data:newerPageUrl'>
          <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>
<b:else/>
<span class='linkgrey left'><h6>Next</h6><h5>This is the most recent template.</h5></span>
         </b:if>

    <b:if cond='data:olderPageUrl'>
       <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>
<b:else/>
<span class='linkgrey right'><h6>Previous</h6><h5>This is the last template.</h5></span>
       </b:if>  
 </div>
  </div>
<script type='text/javascript'>
//<![CDATA[
$(window).load(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').html('<h6>Next</h6><h5>' + newerLinkTitle + '</h5>');
    });
    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').html('<h6>Previous</h6><h5>' + olderLinkTitle + '</h5>');
    });
});
//]]>
</script>
</b:if>

NB: Perhatikan javascript/jQuery-nya pada var newerLink akan mencari tag a dengan class blog-pager-newer-link kemudian di load lalu mencari class post-title yang pertama setelah mendapatkannya lalu mengambil text yang ada di dalamnya kemudian diletakkan pada html. Ingat javascript/jquery ini akan berfungsi jika judul pada blog anda memiliki class post-title. Jika blog anda memiliki class yang beda misalnya judul-artikel maka pada bagian .post-title diganti dengan .judul-artikel.
Karena ini menggunakan jQuery maka setidaknya blog anda sudah ada jQuery librarynya..

4

Tahap ini merupakan tahap terakhir yaitu mempercantiknya dengan CSS agar lebih menarik. Kode CSS nya saya ambil dari template JPstation yang saya buat. Jadi hasilnya akan sama seperti Demo link demo dibawah:

View The Demo

Kode CSS dari navigasi template diatas yaitu:

.pager-isi{background:white;overflow:hidden;border:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.pager-isi a,.pager-isi .linkgrey{width:50%;display:block;float:left;padding:10px 0;font-size:120%}
.pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none}
.pager-isi h6{color:#575757;font-size:105%;font-weight:bold}
a.blog-pager-newer-link{background-image:url(http://4.bp.blogspot.com/-r8YeL5MClP8/UIT2mjkPR6I/AAAAAAAAGGM/QM_4AcjZNfY/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left}
a.blog-pager-older-link{background-image:url(http://1.bp.blogspot.com/-SovF-2Yqzx8/UIT2nmYLCuI/AAAAAAAAGGU/FjDXOtx5erk/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right}
.pager-isi .linkgrey.left{padding-left:3.5%;text-align:left}
.pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}

Sumber : http://mkr-site.blogspot.com/2012/11/membuat-navigasi-blogspot-dibawah-postingan.html