Cara Mengganti Next Previous Navigasi Halaman Dengan Judul Artikel




Cara Mengganti Next Previous Navigasi Halaman Dengan Judul Artikel
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.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect