Home Catatan Blogging Cara Membuat dan Memodifikasi Next Post Older Post dengan Judul Posting di Blog

Cara Membuat dan Memodifikasi Next Post Older Post dengan Judul Posting di Blog

Cara menampilkan Next Post dan Older Post dengan menampilkan Judul Postingan dibawahnya, hal ini untuk memudahkan pengunjung untuk melihat postingan sebelum dan sesudahnya.



Langkah-langkah menampilkan Next Post dan Older Post dengan menampilkan Judul Postingan :

  1. Pada dasbord blog, klik "Tema" atau "Template"
  2. Kemudian klik "Edit Tema"
  3. Cari kode :
    </head>

  4. Simpan kode berikut di atas kode  </head> 
    <!--djCode menampilkan next post-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.halaman{padding:5px 0;background:#fff;border-top:2px solid #9ACD32;border-bottom:3px solid #9ACD32;margin:10px 0 0}
.halaman-kiri{width:49%;float:left;margin:0;text-align:left;color:#666;transition:all .3s ease-out;}
.halaman-kanan{width:49%;float:right;margin:0;text-align:right;color:#666;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#555!important;}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#48d!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family:Arial,sans-serif;font-weight:300;background:none;text-decoration:none}
.halaman-kiri a,.halaman-kanan a{color:#48d;}
.pager-title-left,.pager-title-right{font-family:&#39;Oswald&#39;,sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;transition:all .3s ease-out;color:#999}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:1px 10px 10px}
#blog-pager {padding:5px 0;margin:5px 0}
#blog-pager-newer-link a{float:left;line-height:17px;padding:0 0 10px;color:#666;font-size:15px;font-weight:300}
#blog-pager-older-link a{float:right;line-height:17px;color:#666;padding:0 0 10px;font-size:15px;font-weight:300}
</style>
</b:if>

  5. Cari kode :
    <div class='post-footer-line post-footer-line-3'>

  6. Simpan kode berikut di bawah kode
     <div class='post-footer-line post-footer-line-3'> 
    <!--djCode menampilkan next post2-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
        <span class='pager-title-left'>Previous</span><br/>
  <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'>&#171; Prev Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><span class='pager-title-left'>Newest</span></span><br/>
You are reading the newest post
    </b:if>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <span class='pager-title-left'>Next</span><br/>
      <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'>Next Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Oldest</span></span><br/>
You are reading the latest post
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>
</b:if>

    7. Catatan :

    • Penempatan kode tersebut disesuaikan dengan template blog yang anda gunakan
    • Penempatan kode tersebut bisa disimpan di atas kode
      <div id='related post'> (kode posting terkait)
      atau di atas kode <div id='comments'> (kode kotak komentar), tergantung keinginan.
    • Anda bisa mengganti kalimat yang diberi warna merah dengan kalimat keinginan anda
      • Previous bisa diganti dengan Artikel Selanjutnya
      • Newest bisa diganti dengan Artikel Terbaru
      • You are reading the newest post bisa diganti Anda sedang membaca postingan terbaru
      • Next bisa di ganti dengan Artikel Sebelumnya
      • Next Post bisa di ganti dengan Artikel Sebelum artikel ini
      • You are reading the latest post bisa diganti Anda sedang membaca postingan pertama


  7. Cari kode :
    </body>

  8. Simpan kode berikut di atas kode  </body> 
    <!--djCode menampilkan next post3-->
 <b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>
//Pager
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>
 </b:if>

  9. Cari kode :
    <b:include name='nextprev'/>

  10. Hapus kode tersebut dan ganti dengan kode berikut
    <!--djCode menampilkan next post4-->
<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>
    11. Kode tersebut di atas sebenarnya hanya menambahkan kode yang diberi warna biru

    Catatan :

    • Apabila kode <b:include name='nextprev'/> tidak ada
    • Cari kode <b:includable id='nextprev'>
    • Tambahkan kode yang diberi warna Catatan Biru seperti kode lengkapnya di bawah
    <b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </b:if>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:if>
</b:if>
</b:includable>

    Apabila di template blog anda belum di pasang kode JavaScript, silahkan anda simpan kode JQuery di atas  </head>   
    
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'/>
atau (kode jquery yang otomatis update):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

  11. Setelah selesai, klik "Simpan Tema/Template"

Demikian Catatan Kecil tentang :
Terima kasih atas kunjungannya dan "Selamat Berkreasi Semoga Sukses"

Labels:
Selanjutnya 
« Prev Post
 Sebelumnya
Next Post »

Catatan Terkait


Tidak ada komentar:

Posting Komentar

Silahkan tulis komentar / saran-sarang yang membangun di sini !
Powered by : Blogger
DMCA.com Protection Status
Cara Membuat dan Memodifikasi Next Post Older Post dengan Judul Posting di Blog