Cara Membuat Next Prev dengan Judul Posting

Karena ada beberapa sobat blogger bertanya tentang Cara Membuat Next Prev dengan Judul Posting kali ini saya akan membahasnya kepada sobat semua. sebenarnya tutorial ini sudah lama sekali populer namun masih banyak sobat yang belum tahu cara menempatkan kode dengan benar al hasil template jadi kelihatan amburadul dan terkesan sangat morat-marit, terlebih ketika menempatkan kode si punya blog malah bingung dimana tadi menempatkan kodenya hehehe,,, fenomena ini sering terjadi dan dialami oleh pemula tau newbie.

Sebenarnya cara ini cukuplah simple dan mudah sekali kalau sobat mau mengikuti cara pakainya, namun sebelumnya alangkah baik dan nanti tak terjadi apa yang tak diinginkan silahkan sobat backup template dahulu, buat yang belum tahu cara backup template silahkan buka halaman cara backup dan upload templat. ini merupakan antisipasi yang efektif kalau benar-benar sobat bingung. perlu saya garis bawahi sebelum sobat menerapkan kode ke templat blogspot baiknya baca dulu tutorial ini sampai selesai agar jelas apa yang saya uraikan.
Cara Membuat Next Prev dengan Judul Posting-giga watt

Baca selanjunya atau Baca sebelumnya lebih dikenal dengan navigasi next prev merupakan tampilan yang disuguhkan untuk pengunjung blogger agar mau melihat halaman yang dipostingkan di blog atau website. namun dengan adanya navigasi page dengan title atau judul blog berikutnya ata sebelumnya memungkin sekali untuk pengunjung mau membuka halaman website atau blog tersebut. dari pada kita panjang lebar terus langsung saja kita mulai tutorial ini untuk langkah-langkahnya sbeagai berikut :

1. anggap saja sobat blogger sudah berada di edit templat. silahkan cari kode </head> kalau sudah menemukan kode tersebut taruh kode dibawah ini tepat diatasnya.
Klik >>
<style type='text/css'>
.gigawatt-pager { border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
.gigawatt-pager li.next { float: right; padding:0px; background:none; margin:0px;}
.gigawatt-pager li.next a { padding-left: 15px; }
.gigawatt-pager li.previous { margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;}
.gigawatt-pager li.previous a { padding-right: 15px;  }
.gigawatt-pager li.next:hover, .mbt-pager li.previous:hover  {background:#000; }
.gigawatt-pager li { width: 50%; display: inline; float: left; text-align: center; }
.gigawatt-pager li a { position: relative; min-height: 50px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.gigawatt-pager li i { color: #ccc; font-size: 16px; }
.gigawatt-pager li a strong { display: block; font-size: 15px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.gigawatt-pager li a span { font-size: 11px; color: #FF6600;  font-family:oswald,Helvetica, arial; margin:0px;}
.gigawatt-pager li a:hover i { color: #ff0000; }
.gigawatt-pager li.previous i { float:left; margin-top:15%; margin-left:3%; }
.gigawatt-pager li.next i { float: right;margin-top: 15%;margin-right: 3%; }
.gigawatt-pager li.next i, .gigawatt-pager li.previous i ,.mbt-pager li.next,  .mbt-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}
</style> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

2. langkah berikutnya silahkan simak baik-baik. cari kode
<b:includable id='nextprev'>...</b:includable>
mungkin yang akan terjadi kalau kalian klik maka akan ada kode yang memanjang namun jangan pusing dulu yang terpenting kode <b:includable> sampai </b:includable> silahkan drag dan ganti dengan kode dibawah ini.
Klik >>
            <b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <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>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
</b:if></b:if>
  </div>
  <div class='clear'/>
</b:includable>

3. simak lebih teliti lagi, kalau kalian sudah pada tahap ini sekarang silahkan cari kode
<div class='post-footer-line post-footer-line-1'>
kalau sudah tiba pada kode diatas biasanya ada kode line-1, line-2 dan line-3 silahkan pilih sendiri kalian akan menaruhnya dimana. namun kalau kode diatas tidak ada sobat bisa mencari kode
<div class='post-footer'>
simak baik-baik dulu,,, setelah sobat menemukan kode diatas yang aku maksut silahkan taruh kode dibawah ini tepat di bawahnya,, ingat dibawahnya,,,
Klik >>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='gigawatt-pager'>
            <li class='next'>
        <b:if cond='data:newerPageUrl'>
    <i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
        <b:else/>
    <i class='fa fa-chevron-right'/><a rel='next'><strong>Selanjutnya</strong> <span>Anda Berada diPostingan Terbaru</span></a>
        </b:if>
            </li>
            <li class='previous'>
        <b:if cond='data:olderPageUrl'>
    <i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
        <b:else/>
    <i class='fa fa-chevron-left'/><a rel='previous'><strong>Sebelumnya</strong> <span>Anda Membuka Postingan Terakhir</span></a>
        </b:if>
            </li>
            </ul>
<script type='text/javascript'>
//<![CDATA[
(function($){   
    var newerLink = $('a.newer-link');
    var olderLink = $('a.older-link');
    $.get(newerLink.attr('href'), function (data) {
     newerLink.html('<strong>Selanjutnya</strong> <span>'+$(data).find('.post h2.post-title').text()+'</span>');   
    },"html");
    $.get(olderLink.attr('href'), function (data2) {
     olderLink.html('<strong>Sebelumnya</strong> <span>'+$(data2).find('.post h2.post-title').text()+'</span>');   
    },"html");
})(jQuery);
//]]>
</script>
</b:if>
disini banyak kasus yang tak berhasil menampilkan judul atau title karena penempat meta H2 dan H3. nah biar kasus tersebut bisa cepat selesai ganti kode warna merah diatas dengan kode yang sesuai dengan judul postingan kalian. disitu sudah saya tandai untuk h2 kalau tak muncul silahkan sobat ganti dengan h3. insyaalloh dengan sobat mengikuti langkah-langkah yang benar tutorial yang aku tulis ini akan sukses di templat blog kalian.
4. sekarang ke langkah terakhir kalau sudah kalian taruh kodenya silahkan kalian review dulu kalau sudah benar-benar berubah silahkan simpan dan lihat hasil kerja kalin.

nah itulah tutorial  Cara Membuat Next Prev dengan Judul Posting semoga tipsku kali ini bermanfaat buat sobat blogger, silahkan mencoba semoga berhasil

16 komentar:

  1. thanks banget kk, akhirnya berhasil juga. seharian cari solusinya tapi gak dapat dapat.. sekali lagi thanks...
    sebagai gantinya saya akan beri G+1 dan G+ follow...
    kunjungi juga blog saya :
    http://dhaimaru.blogspot.com/

    BalasHapus
    Balasan
    1. sama-sama mas,,, sekedar berbagi pengetahuan saja

      Hapus
  2. Bang cara ganti tulisan sebelum/sesudah nya jadi kecil gimana? terus di ganti yg judul post kita yg jadi besar

    BalasHapus
    Balasan
    1. gigawatt-pager li a span { font-size: 11px; color: #FF6600; font-family:oswald,Helvetica, arial; margin:0px;}

      ganti font-size 11px dengan ukuran sesuka sampean itu untuk judul,
      untuk memperkecil next dan prev ganti kode H2 dengan angka H5 atau H6.

      Hapus
  3. Mas ...Mintak tolong donk, kenapa punyak saya tidak muncul ?

    BalasHapus
    Balasan
    1. apa yang bisa saya bantu

      Hapus
    2. Maaf mas ...next prevnya tidak kelihata, yang kelihatan cuma bingkai doang mas ? dan saya sudah ikutin saran mas yang ganti h2 menjadi h4 tapi tetap tidak mau.

      Hapus
    3. sama satu lagi mas, di halama utama next tidak mucul kecuali kita kelik salah satu judul artikel baru akan muncul bingkai doang. ( chordto.blogspot.com )

      Hapus
    4. semua sudah di lakukan dengan benar? seperti langkah di atas.... kalau sudah coba perbaiki lagi dari awal kalau memang belum berhasil nanti saya bantu

      Hapus
    5. Maaf mas, saya sudah lakukan sesuai procedure diatas, tapi tetap tidak bisa kelihatan dan saya bingung mas salah dimana. Mintak tolong untuk dibantu !

      Hapus
    6. ganti h4 jadi h3 kalau tidak bisa juga ganti dengan h2

      Hapus
    7. Maaf Mas setelah saya kotak katik tulisan (sebelum dan selanjutnya ) sudah muncul tapi yang jadi masalah artikel dibawah tombol (sebelum dan selajutnya) tidak kelihatan.

      Hapus
    8. coba ganti warna font di css-nya, dan say lihat pada template tidak ada jquery coba taruh jquery

      Hapus
  4. tidak muncul silakan dicek saya sudah ganti h2
    http://www.bisnisdarirumah.co.vu/

    BalasHapus
    Balasan
    1. Silahkan baca betul-betul tutorial diatas, Jika masih salah ulangi lagi....

      Hapus
  5. keren sob, coba bantu aja kalo gak muncul tambahin jQuery di atas /head

    http://ngangkangs.blogspot.com

    BalasHapus