menjelaskan tentang cara membuat navigasi dibawah postingan dengan script untuk memunculkan judul artikel selanjutnya atau sebelumnya sehingga blog lebih terkesan profesional.

Cara meletakkan navigasi blogspot di bawah artikel - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

menjelaskan tentang cara membuat navigasi dibawah postingan dengan script untuk memunculkan judul artikel selanjutnya atau sebelumnya sehingga blog lebih terkesan profesional.

Cara meletakkan navigasi blogspot di bawah artikel

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


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}


Beberapa template blogger yang sudah saya buat dan menggunakan cara diatas diantaranya:

Bagi yang belum paham silahkan berkomentar nanti saya coba bantu sebisa saya..
Salam Sukses Selalu.
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

29 comments:

  1. saya ijin simpan tutorialnya....

    O ya, terimakasih sudah membantu saya memperbaiki menu navigasi di situs teras-info.com ....

    senang berkenalan dengan anda.. :-bd

    BalasHapus
  2. izin simpan tutorialnya yah ... senang bisa ketemu blog ini :-d

    kunjungi yah www.omjunior.blogspot.com

    BalasHapus
  3. kok jadi gini mas :p

    http://3.bp.blogspot.com/-XWc_pB873N8/UK3c61J7tQI/AAAAAAAACoA/V6NOUFN9B4I/s320/Lorem+sumpek+pek+pek.png

    BalasHapus
  4. mantap :-bd
    Mau donk template demonya.. bisa di download ga mas??
    thanks :-bd

    BalasHapus
    Balasan
    1. bisa..
      http://mkr-site.blogspot.com/p/gallery-template-blogger.html
      ato..
      http://www.ivythemes.com/

      Hapus
  5. bookmark dulu aja mas... masih blm ngerti.

    BalasHapus
  6. Mas bisa minta tolong ga, saya mau nambahin lagi laman baru, lama, home di bawah postingan tapi tetep ga bisa-bisa.. caranya gimana ya?? :-?

    http://dizenido.blogspot.com/2013/01/old-motorcycle_1223.html

    BalasHapus
  7. kalau meletakannya dibawah area komentar gimana bro ? :o

    BalasHapus
    Balasan
    1. yang umumnya sih letaknya memang di bawah area komentar...

      Hapus
  8. ko jdinya gini mas ga rata..!!malah previous ya di bawah :-? :-?

    http://3.bp.blogspot.com/-XWc_pB873N8/UK3c61J7tQI/AAAAAAAACoA/V6NOUFN9B4I/s320/Lorem+sumpek+pek+pek.png

    mohon bantuanya..!!

    BalasHapus
    Balasan
    1. bisa tulis url blognya..
      karena tidak bisa klo cuma gambar...

      Hapus
    2. wah..!! kmren" udah di coba malah eror sekarang di coba lagi malah ga muncul ini mas halaman nya cuman contoh template.

      http://demo-dsignet5.blogspot.com/2013/01/simpan-template.html#tab-2

      Hapus
    3. malah jadi ilang mas`ga muncul..

      Hapus
    4. waktu yang previous jatuh kebawah mungkin karena di template saya menggunakan boz-sizing..
      jadi seharusnya pada .pager-isi menjadi:
      .pager-isi{background:white;overflow:hidden;border:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
      error mungkin terjadi karena judulnya tidak memiliki class post-title.
      coba ganti .post-title dengan .padd-post-item-title sehingga JS/jQuery-nya jadi begini:
      <script type='text/javascript'>
      //<![CDATA[
      $(document).ready(function () {
      var newerLink = $('a.blog-pager-newer-link').attr('href');
      $('a.blog-pager-newer-link').load(newerLink + ' .padd-post-item-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 + ' .padd-post-item-title:first', function () {
      var olderLinkTitle = $('a.blog-pager-older-link').text();
      $('a.blog-pager-older-link').html('<h6>Previous</h6><h5>' + olderLinkTitle + '</h5>');
      });
      });
      //]]>
      </script>



      Hapus
    5. masih tetep mas ga muncul mlah ilang..!! ;(

      Hapus
  9. kalo gak rata itu karena masalah cssnya .. coba pake yang punya saya ...

    .pager-isi{width:560px;background:white;overflow:hidden;border-top:1px solid #DDD; border-bottom:1px solid #DDD}
    .pager-isi a,.pager-isi .linkgrey{width:260px;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;text-align:left; padding-left:20px}
    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;;text-align:right; padding-right:20px}
    .pager-isi .linkgrey.left{padding-left:3.5%;text-align:left}
    .pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}

    nitip link ya
    NEWEST DOWNLOAD - FULL VERSION DOWNLOAD

    BalasHapus
  10. Saya cuma menambahkan java scriptnya saja kang, apa sudah cukup membuat tulisan older post nya berubah dengan isi. mohon pencerahan.

    BalasHapus
  11. mas minta tutorial navigasi blogspot dibawah psotingan tapi pake tumbnail / gambar sprti di blog ini .. http://techbeat.com/

    BalasHapus
  12. wah nice bgt artikelnya sob thnx ya

    BalasHapus
  13. kalau nextnya di ubah di sebelah kanan gmn ya ?

    BalasHapus
  14. Mas cara membuat related post di bawah post seperti ini gimana ya

    http://ximg.us/upload/1373188802.png

    BalasHapus
  15. ;-( kode yg jQuery ditaruh dimana mas?

    BalasHapus
  16. punya saya kode navigasi.a gak muncul, padahal pake template DarkRed, mohon bantuannya
    cek http://cheatind.blogspot.com/2013/09/walktrought-extermination.html

    BalasHapus
  17. Pusing Nih bagaimana cara aplikasiannya.

    BalasHapus
  18. ohm mohon bantuan tuk custom template darkred ane mau pake templatenya mantab ohm, klo ngk keberatan mohon infonya ke assyfa2012[at]gmail[dot]com

    BalasHapus
  19. kok gak aktif lagi mas, saya kangen loh :-d

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP