Cara Membuat Page Navigation di Blog

Oleh Unknown

Selasa, 27 Mei 2014

Bagikan :

Tweet

Cara Membuat Page Navigation di Blog - Page navigation atau navigasi halaman ini bertujuan untuk memudahkan pengunjung untuk melihat-lihat konten-konten yang ada dalam blog kita. Page navigation ini berupa nomor-nomor halaman yang per halamannya kita bisa atur jumlah postingan yang tampil.

Page navigation ini berada di homepage. Dengan page navigation number ini, pengunjung tidak usah satu per satu membuka postingan-postingan lama di blog kita. Karena, pengunjung bisa memilih daftar postingan-postingan lama di blog kita. Misal, pengunjung ingin mengetahui postingan paling lama di blog kita. Otomatis, pengunjung akan langsung mengklik nomor terakhir (paling besar) pada page navigationnya.

Anda bisa lihat gambarnya di bawah ini.

DEMO

Untuk memasangnya cukup mudah.

Pertama, silahkan simpan CSS berikut ini di atas ]]></b:skin> atau </style>

.showpageNum a,.showpage a{background:#999;text-decoration:none;white-space:nowrap;color:#ffffff;margin:10px 3px;padding:5px 10px;transition:all 400ms ease-in-out}
.showpageNum a:hover,.showpage a:hover{color:#ffffff;text-decoration:none;background:#47AADD}
.showpageOf{display:none;margin:0}
.showpagePoint{color:#ffffff;text-decoration:none;background:#47AADD;font:18px "PT Sans Narrow";margin:10px 3px;padding:5px 10px;transition:all 400ms ease-in-out}

Lalu, cari kode seperti kode berikut ini. Sesuaikan juga class atau element CSS postingannya dengan template anda untuk mencarinya.

<div class='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
.......................................
.......................................
.......................................
</b:widget>
</b:section>

SIMPAN KODE PEMANGGILNYA DI SINI

</div>

Setelah ketemu, masukkan kode pemanggil berikut di daerah yang sudah ditentukan di atas.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
    var postperpage=6;
    var numshowpage=5;
    var upPageWord =&#39;&#171; Previous &#39;;
    var downPageWord =&#39;Next &#187;&#39;;
    var urlactivepage=location.href;
    var home_page=&quot;/&quot;;
  </script>
<script src='http://yourjavascript.com/218437119/halamanav.js' type='text/javascript'/>
</b:if>
</b:if>

Untuk postperpage merupakan jumlah postingan yang tampil untuk setiap halamannya. Untuk numshowpage adalah jumlah nomor (angka halaman) yang tampil. Anda bisa mengubahnya sendiri.

Tag : Blogging