March 28th 2013

Wordpress PageNavi adalah sebuah Plugin Wordpress yang berfungsi untuk menavigasi halaman ke halaman sebelumnya atau selanjutnya, ini sangat menarik dan sangat di sukai banyak orang.Navigasi ini merupakan sebuah kelanjutan dari Navigasi Halaman untuk menggantikan link " ← Older posts | Newer posts → " pada blog.Pada dasarnya plugin navigasi halaman ini juga di miliki oleh blogger blog,tetapi bukan berarti kita menggunakan plugin wordpress melainkan kita dapat menggunakan plugin navigasi halaman yang sejenis di blogger blog.Pada tutorial sebelumnya saya juga pernah membahas tentang navigasi halaman ini,dan anda bisa membacanya di Cara Membuat Page Navigation ( Navigasi Halaman) Dengan Nomor Pada Blogger,tutorial tersebut tidak jauh berbeda dengan tutorial yang akan kita bahas kali ini yaitu Cara Membuat Navigasi Halaman Ala Wordpress.Hal yang membedakan dari keduanya mungkin pada script dan tampilan navigasi halaman pada blog.

Dan adapun Cara Membuat Navigasi Halaman Ala Wordpress adalah:

1. Silahkan login ke blogger dengan ID anda.

2. Pilih Opsi lainya >> Templete .

3. Backup terlebih dahulu templete anda , klik pada tulisan Backup/Restore dibagian kanan atas.

4. Pilih Edit HTML >> Centang Kotak Expand Widget Templates.

5. Cari Kode seperti di bawah ini (Gunakan Ctrl+F atau F3 untuk mencari kode).

<b:includable id='mobile-index-post' var='post'>

6. Copy kode di bawah ini dan pastekan diatas kode tadi pada no.5 .

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}</script>
<script src='http://bambang-file3.googlecode.com/files/navipage.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

7. Selanjutnya Cari Kode seperti di bawah ini (Gunakan Ctrl+F atau F3 untuk mencari kode).

<b:include name='nextprev'/>

8. Kemudian ganti kode diatas dengan kode di bawah ini.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
</b:if>

9. Untuk style pada navigasi halaman,copy kode di bawah ini dan pastekan diatas kode ]]></b:skin>.

/*******Navigasi Halaman Css *******/
#blog-pager {
    width: 100%;
    text-align: center;
    margin: 0 0 30px !important;
    padding: 0 0 20px;
    clear: both;
    position: relative;
    z-index: 10;
    line-height: 36px;
}

.pagenavi {
    width: 100%;
    position: relative;
    text-align: center;
    margin: 0 0 30px;
    padding: 30px 0;
    clear: both;
    z-index: 10;
    line-height: 36px;
}

#blog-pager a,
.pagenavi span,
.pagenavi a {
    margin: 0 4px 0 0;
    padding: 4px 12px;
    text-decoration: none;
    color: #fff;
    height: 30px;
    line-height: 31px;
    background-color: #d4d4c2;
}

#blog-pager a:hover,
.pagenavi a:hover {
    text-decoration: none;
    background-color: #fff;
    color: #777;
}

#blog-pager-older-link,
#blog-pager-newer-link {
    float: none;
    height: 30px;
}

.pagenavi .current {
    color: #777;
    text-decoration: none;
    background: #fff;
}

.pagenavi .pages {
    color: #fff;
}

10. Simpan templete anda.

Selesai dan semoga bermanfaat..

This post first appeared on Tutorial Tip Dan Trik Blogger - Bambang's Page, please read the originial post: here