Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger Cara buat blog itu- Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger
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 Cara buat blog itu- Cara Mengganti Next Post Home Older Post dengan Judul Posting di Blogger

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

1. Tema > Edit HTML
2. Copas arahan CSS Next Post Home Older Post dengan Judul Posting berikut ini di atas arahan </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 arahan HTML Next Post Home Older Post dengan Judul Posting berikut ini di bawah arahan <data:post.body/> yang kedua atau ketiga.

Bisa juga disimpan di atas arahan <div id='related post'> (kode posting terkait) atau di atas arahan <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 arahan JavaScript Next Post Home Older Post dengan Judul Posting berikut ini di atas arahan </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 arahan berikut ini:

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

dengan arahan 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 arahan berikut ini yang ada di bawah arahan <b:includable id='nextprev'>

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

Tambahkan arahan tag kondisional di awal dan final arahan tersebut, adalah arahan 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.carabuatblogitu.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours