Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger

Baca Juga

Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger

Berikut ini Cara Mengganti Next Post Home Older Post dengan Judul Posting atau Judul Tulisan di halaman dalam postingan Blogger, khususnya untuk template bawaan blogger.

Biasanya template yang bukan bawaan blogger sudah menggunakannya.

Berikut ini tampilan Next Post Home Older Post dengan Judul Posting.

Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger

1. Tema > Edit HTML
2. Copas kode CSS Next Post Home Older Post dengan Judul Posting berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.halaman{padding:5px 0;background:#fff;border-bottom:1px solid #f1f1f1;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:'Oswald',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>

3. Copas kode HTML Next Post Home Older Post dengan Judul Posting berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

Bisa juga disimpan di atas kode <div id='related post'> (kode posting terkait) atau di atas kode <div id='comments'> (kode kotak komentar)

<!-- Blog Pager New Start -->
<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>
<!-- Blog Pager New End -->

4. Copas kode JavaScript Next Post Home Older Post dengan Judul Posting berikut ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'></script>
<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>

5. Cari dan ganti kode berikut ini:

    <!-- navigation -->
    <b:include name='nextprev'/>

dengan kode ini:

    <!-- navigation -->
<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>

Jika kode  <b:include name='nextprev'/> tidak ditemukan, cari kode berikut ini yang ada di bawah kode <b:includable id='nextprev'>

  <div class='blog-pager' id='blog-pager'> ... </div>

Tambahkan kode tag kondisional di awal dan akhir kode tersebut, yaitu kode warna merah di bawah ini:

<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'> ... </div>
</b:if> </b:if>

6. Simpan Template!

Demikian Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger. Good Luck and Happy Blogging! (www.contohblog.com).*