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.

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

Related Posts:

Tweet