Iklan

Mengganti Next Previous Page dengan Judul Posting Blog

Mengganti Next Previous Page dengan Judul Posting Blog

Bloggingpasuruan - Kali saya akan memberikan tips bagaimana cara mengganti next dan previous page atau umum disebut halaman berikutnya dan halaman sebelumnya. Umumnya ini terdapat pada bagian bawah postbody yang tampilannya terdapat beranda di posisi tengah atau diantara halaman berikutnya dan sebelumnya.

Mengganti Next Previous Page dengan Judul Posting Blog

Dan kita akan memodifikasi tampilan default ( bawaan blogger ) seperti gambar diatas menjadi tampilan lebih keren.



Berikut ini Cara Mengganti Next Previous Page dengan Judul Posting di Blogger

1. Masuk ke a kun Blogger Anda
2. Pilih Dashbord >> Templete >> Edit Html
3. Cari kode yang mirip seperti dibawah ini 
#blog-pager-newer-link{float:left;font-size:100%;border-right:1px solid #eee;}
#blog-pager-older-link{float:right;font-size:100%;border-left:1px solid #eee;}
.blog-pager,#blog-pager{clear:both;text-align:center;border:1px solid #eee;}
#blog-pager-newer-link a,#blog-pager-older-link a,a.home-link{color:#666;transition:all .3s ease-in-out}
#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover{color:#1F5CA8}
a.blog-pager-older-link,a.blog-pager-newer-link,a.home-link{display:block;padding:8px 20px;transition:all .3s ease-in-out;}
a.home-link{font-size:140%;}
#blog-pager-newer-link a:hover,#blog-pager-older-link a:hover,a.home-link:hover,a.home-box:hover,.mobile-desktop-link a.home-link:hover{color:#1F5CA8;}
.mobile-desktop-link a.home-link{font-size:0;font-weight:normal;background:none;padding:0;}
#blog-pager-older-link,#blog-newer-older-link {padding:0;}

4. Lalu Anda ganti dengan kode seperti dibawah ini
/* CSS Halaman Navigasi */
.halaman {background:#ecf0f1;padding:10px 0;margin:20px 0 auto;}
.halaman-kiri{width:50%;float:left;margin:0;text-align:left;color:#bbb;transition:all .3s ease-out;}
.halaman-kanan{width:50%;float:right;margin:0;text-align:right;color:#bbb;transition:all .3s ease-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:#ddd!important;}
.halaman-kiri a,.halaman-kanan a{color:#999;}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:#666!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px;font-family: 'Roboto Condensed',Helvetica,Arial,sans-serif;font-weight:400;background:none;text-decoration:none}
.current-pageleft{padding:0 0 0 15px;}
.current-pageright{padding:0 15px 0 0;}
.pager-title-left{font-family: 'Poppins',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;transition:all .3s ease-out}
.isihalaman-kiri{margin:0}
.isihalaman-kanan{margin:5px 10px 10px}
#blog-pager-newer-link{float:left;padding:0 0 0 15px;}
#blog-pager-older-link{float:right;padding:0 15px 0 0;}
.blog-pager,#blog-pager{clear:both;text-align:center}

5. Langkah berikutnya cari kode seperti dibawah ini
<b:includable id='nextprev'>
..............................
..............................
..............................
</b:includable> 

6. Jika sudah ketemu, ganti seperti kode dibawah ini :
<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'><i class='fa fa-arrow-circle-o-left'/></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'><i class='fa fa-arrow-circle-o-right'/></a>
      </span>
    </b:if>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><i class='fa fa-home'/></a>
    </div>
    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><i class='fa fa-home'/></a>
    </div>
  </div>
  </b:if>
</b:if>
  <div class='clear'/>
</b:includable> 

7. Kemudian lanjutkan cari kode seperti dibawah ini :
<b:includable id='post' var='post'>
..............................
..............................
..............................
</b:includable> 

8. Silahkan simpan kode di bawah ini tepat di atas penutup kode di atas </b:includable>. Ini untuk memunculkan post navigasi di atas komentar atau di bawah postingan.

<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'>Next</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'>Latest</span></span>
    </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'>Previous</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'>First</span></span>
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>
</b:if>

9. Kemudian lanjutkan cari kode seperti dibawah ini :

 <b:include name='nextprev'/> 

10. Jika sudah ketemu, coba perhatikan kode  yang sama seperti ini <!-- navigation -->
Kemudian ganti semuanya dengan kode seperti di bawah ini untuk navigasi halaman di bawah komentar


<!-- navigation -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
        <b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
    </b:if>
    </b:if> 

11. Kemudian lanjutkan menyimpan kode javascript dibawah ini diatas kode </body>  :

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//Pager by crepictdesign.blogspot.co.id
$(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> 

12. Kemudian simpan ( save ) template Anda dan selesai.....

Jika ada masalah terkait tutorial Cara Mengganti Next Previous Page dengan Judul Posting, silahkan tinggalkan pesan pada kotak komentar di bawah ini. Dan jika Anda tertarik dengan tutorial diatas mohon bantuannya untuk share ke social media dibawah ini, terima kasih atas kunjungannya…
Next
Prev Post
Previous
Next Post

4 comments:

  1. I do trust all of the concepts you’ve presented on your post. They’re really convincing and will definitely work. Still, the posts are too brief for newbies. May you please extend them a little from subsequent time?Also, I’ve shared your website in my social networks.
    Sharepoint Training in Chennai
    SEO Training in Chennai
    Selenium Training in Chennai

    ReplyDelete
  2. Wih ada juga blogger dari pasuruan, salam om dari pasuruan-community(.)blogspot(.)com

    ReplyDelete


  3. I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog. I am always searching like this type blog post. I hope I will see again.
    Best Ice Fishing Gloves Best Ice Fishing Gloves Best Ice Fishing Gloves

    ReplyDelete
  4. I am glad that I saw this post. It is informative blog for us and we need this type of blog thanks for share this blog, Keep posting such instructional blogs and I am looking forward for your future posts. Python Projects for Students Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account. Project Center in Chennai

    ReplyDelete