Cara Mengganti Next Previous Navigasi Halaman Dengan Judul Artikel Cara Mengganti Next Previous Navigasi Halaman Dengan Judul Artikel - mizipediacom mizipediacom: Cara Mengganti Next Previous Navigasi Halaman Dengan Judul Artikel

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Mengganti Next Previous Navigasi Halaman Dengan Judul Artikel

Thursday, December 14, 2017



Cara Mengganti Next Previous Navigasi Halaman Dengan Judul Artikel
Mungkin anda baru saja masuk ke dunia blogger dan pada bagian bawah postingan artikel kalian tidak terdapat nya tombol Next previous Navigasi Halaman atau sudah ada namun anda merasa bosan dengan next previous navigasi halaman default Blogger tersebut, jadi anda bisa mengganti next previous tersebut dengan judul postingan. 

Tujuan dari menggantikan  tombol Next previous Navigasi Halaman adalah agar dapat menjadi salah satu cara untuk meningkatkan pageview blog. Si pengunjung mudah dan bisa mengetahui bahasan/ topik halaman sebelum atau sesudah halaman yang sedang mereka baca. Apabila pengunjung tersebut tertarik untuk melihat judul yang lainnya. maka ada harapn blog kita dapat meningkatkan para pengunjung.


Dan saya rasa sudah banyak  juga custom template yang telah menggunakan custom blog pager di artikel/ postingan mereka. Nah dengan custom blog pager, kita dengan mudah dapat menampilkan blog pager di mana saja seperti di bawah postingan atau berada di bagian antara postingan dan komentar. atau bahkan ditampilkan di keduanya. Dan Ada pula yang mengganti link next post dan previous post dengan judul postingan. 

Untuk anda yang template blognya masih menggunakan blog pager default Blogger atau blog pager lama, Anda dapat mencoba memakai custom blog pager ini seperti yang anda lihat gambar di atas atau lihat Demonya seperti gambar video Gif di bawah ini.
Untuk anda yang tertarik ingin mencoba mengganti next previous navigasi halaman dengan judul postingan, anda bisa ikuti langkah-langkah di bawah ini.

Cara Menggantikan Next Previous Navigasi

1. Pastikan anda sudah masuk di dasbhor anda sendiri
2. Kemudian anda bisa Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Lalu anda cari kode ]]></b:skin> dan copas kode di bawah ini dan simpan di atas kode ]]></b:skin>
.halaman{margin-top:20px;padding:0;background:#e9e9e9}
.halaman-kiri{width:50%;background:none;float:left;margin:0;padding-bottom:10px;text-align:left;color:#333;transition:all .3s ease-in-out;}
.halaman-kanan{width:50%;background:none;float:right;margin:0;padding-bottom:10px;text-align:right;color:#333;transition:all .3s ease-in-out}
.halaman-kanan:hover .pager-title-left,.halaman-kiri:hover .pager-title-left{color:red!important}
.halaman-kanan a:hover,.halaman-kiri a:hover{color:red!important;}
.halaman-kiri a,.halaman-kanan a,.current-pageleft,.current-pageright{font-size:14px; font-family: &#39;Open Sans&#39;, Helvetica, Arial, sans-serif;font-weight:700;background:none;text-decoration:none}
.halaman-kiri a,.halaman-kanan a{color:#333;}
.pager-title-left{font-family: &#39;Trebuchet MS&#39;, sans-serif;font-size:28px;text-transform:uppercase;font-weight:700;transition:all .3s ease-in-out}
.isihalaman-kiri{margin:5px 10px 10px}
.isihalaman-kanan{margin:5px 10px 10px}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
.blog-pager,#blog-pager{clear:both;text-align:center}
.feed-links{clear:both;line-height:2.5em}
4. Jika sudah, maka selanjutnya silahkan cari kode seperti di bawah ini
<b:includable id='nextprev'>
........
........
</b:includable>
5. Kalau sudah ketemu silahkan ganti dengan kode di bawah 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'><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>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
    </div>
    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
    </div>
  </div>
  </b:if>
</b:if>
  <div class='clear'/>
</b:includable>
6. Untuk tahapan ini silahkan anda cari kode seperti di bawah ini (biasanya berada persis di bawah kode di atas).
 <b:includable id='post' var='post'>
........
........
</b:includable>
7. Dan Silahkan anda simpan kode di bawah ini tepat di atas penutup kode di atas </b:includable>.
<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'>Next</span><br/>This is the current newest page</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'>Previous</span><br/>This is the oldest page</span>
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div>
</b:if>
8. Nah di langkah ini terakhir anda lakukan, Anda bisa cari kode </body>. Jika sudah Kemudian simpan kode javascript di bawah ini di atas kode </body>
<script type='text/javascript'>
$(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>
9. Setelah semuanya anda lakukan tahapan di atas, jangan lupa anda klik itu SAVE TEMPLATE dan lihat hasilnya di postingan blog Anda. 
Demikian penjelasan singkatnya, semoga berhasil dan selamat mencoba untuk anda.
Lihat Juga