Cara Membuat Navigasi Next Prev Dibawah Postingan

Ok sobat  pada kesempatan ini me akan membagikan trik bagaimana cara menampilkan navigasi next previous dengan judul posingan halaman selanjutnya dibawah postingan Blog Blogger Blogspot.

Kegunaan memasang navigasi ini adalah agar pengunjung blog dapat melihat postingan sebelum dan sesudah postingan yang sedang dibacanya, tentusaja untuk menambah daya tarik kepada pengunjung agar membaca artikel selanjutnya.

Postingan ini merupakan lanjutan artikel sebelumnya dimana juga telah dijelaskan bagaimana mengganti navigasi next dan previous denga judul, tapi karena di artikel sebelumnya hanya mengganti navigasinya bukan menambahkan jadi saya menulisnya kembali disini.

Ok sobat berikut adalah Cara Membuat Navigasi Next Prev Dibawah Postingan dan tentusaja dengan judul postingan dihalaman sebelum atau halaman selanjutnya.

DEMO

[ Masuk Ke Artikel Untuk Demonya ]

Cara Membuat :
Buka Telmplate > Edit HTML.
Letakkan kode Css di bawah ini tepat di atas ]]></b:skin>.

.pagebutton-nextprevious {background:#FD4848;margin-bottom: 10px;   overflow:hidden; padding:0;}
.pagebutton-nextprevious li.next { margin:0 -2px 0 0; float: left;  border-right:1px solid #ddd; padding:0; background:#FD4848;color:#ffffff;}
.pagebutton-nextprevious li.next a { padding-left: 15px;text-align:left;padding-bottom:20px}
.pagebutton-nextprevious li.previous {float: right; padding:0; background:#FD4848F; margin:0;color:#ffffff}
.pagebutton-nextprevious li.previous a { padding-right:15px; text-align:right;padding-bottom:20px }
.pagebutton-nextprevious li.next:hover, .pagebutton-nextprevious li.previous:hover  {background:#188DFF;color:#ffffff }
.pagebutton-nextprevious li { width: 50%; display: inline; float: left; text-align: center; }
.pagebutton-nextprevious li a { position: relative; min-height: 55px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.pagebutton-nextprevious li i { color: #ffffff; font-size: 18px; }
.pagebutton-nextprevious li a strong { display: block; font-size: 20px; color: #ffffff; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.pagebutton-nextprevious li a span { font-size: 15px; color: #ffffff;  font-family:oswald,Helvetica, arial; margin:0;transition:all 400ms ease-in-out}
.pagebutton-nextprevious li a:hover span,
.pagebutton-nextprevious li a:hover i { color: #fff; }
.pagebutton-nextprevious li.previous i { float:left; margin-top:15%; margin-left:5%; }
.pagebutton-nextprevious li.next i { float: right;margin-top: 15%;margin-right: 5%; }
.pagebutton-nextprevious li.next i, .pagebutton-nextprevious li.previous i ,
.pagebutton-nextprevious li.next, .pagebutton-nextprevious li.previous{transition:all 400ms ease-in-out}

selanjutnya letakan kode dibawah ini dibawah postingan, kalau di demo saya meletakannya dibawah related post, atau atau lebih mudahnya lagi letakan saja kode dibawah ini diatas relatedpost dibawah postingan. Contohnya diatas kode <div id='related-posts'> .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='pagebutton-nextprevious'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='buttonside-left'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next' title='Newer Post'/>
<b:else/>
<i class='buttonside-left'/><a rel='next'><strong>Next</strong> <span>This is the current newest page</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='buttonside-right'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous' title='Older Post'/>
<b:else/>
<i class='buttonside-right'/><a rel='previous'><strong>Previous</strong> <span>This is the current oldest page</span></a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h1.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h1.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if>

Simpan template dan lihat hasilnya. Setelah semuanya selesai, kemungkinan di blog kamu masih ada blog pager  bawaan blogger template kamu. letaknya berada setelah komentar di bawah sendiri. Nah untuk selanjutnya anda dapat menyembunyikannya dan tidak memunculkannya di postingan dengan menambahkan tag kondisional untuk menyembunyikannya di postingan. Biasanya kodenya ada dibawah <b:includable id='nextprev'> kemudian tag kondisional yang saya maksudkan adalah:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
dan penutupnya
</b:if>

Ok sobat sekian postingan untuk saat ini dan semoga artikel mengenai Cara Membuat Navigasi Next Prev dengan Judul halaman sebelum dan judul halaman selanjutnya Dibawah Postingan ini bermanfaat dan mudah dipahami. Terimakasih.

Share on Google Plus

About Unknown