Ok sobat seocips.com pada kesempatan ini seocips 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 tentu saja dengan judul postingan dihalaman sebelum atau halaman selanjutnya.

Navigasi Next Prev Dengan Judul Dibawah Postingan


Di demonya mungkin sedikit berbeda karena warna backgroundnya telah saya ganti, anda bisa mengganti warna backgroundnya sesuai dengan warna template yang anda gunakan.

Cara Membuat Navigasi Next Prev:

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 diatas 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>
 <div style='margin-left:0px;text-align:center;font-size:5px'>
    Widget by : <a class='creditlink2' href='http://www.seocips.com' id='creditlink2' target='blank'>seocips</a>
</div>
</ul>
<script src='https://sites.google.com/site/seocips/seocips-script/pagebuttonnextprevious.js' type='text/javascript'>
</script>
</b:if>
Simpan template dan lihat hasilnya.

Menyembunyikan Navigasi Next Prev Bawaan Blog

Setelah semuanya selesai, kemungkinan di blog kamu masih ada blog pager bawaan blogger template kamu. letaknya berada setelah komentar. 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.
4 Komentar untuk "Cara Membuat Navigasi Next Prev Dibawah Postingan"

Bang mau tanya, saya pemula soal bikin tamplate,

nah cara buat file2 index kita supaya rapih bagaimana.

tamplate saya tidak menggunakan CMS, masih manual semua.

saya ingin menginterasikan tamplate sederhana saya dengan wordpress tapi susah sekali.
mohon bantuannya untuk tutor intergrasi tamplate sederhana dengan wordpress terima kasih.

coba lihat website saya bang.
www.spiritsuniverse.com

Wah maaf nih bang gak bisa bantu, soalnya, belum pernah nyobain wordpress..
web yang wow..