Membuat Paging pada Blogger

Anda mungkin telah melihat Halaman navigasi untuk hampir semua pengguna wordpress, setelah menunggu sekian lama sekarang pengguna blogspot juga dapat memiliki Pager di Blogger, ini benar-benar fitur yang mengagumkan dan sempurna solusi navigasi halaman ini
contoh gambar di bawah ini :

Langkah 1: Pergi ke Layout > Page Element > Add a Gadget > HTML/JAVASCRIPT dan menambahkan kode yang diberikan di bawah ini.

<style type="text/css">
.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}.showpageNum a:link,
.showpage a:link {text-decoration:none;color:#333333;}
</style>
<script style="text/javascript">
var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";
</script>
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js">
</script>

Lihat Screenshot d'bawah ini:

Setelah menginstal kode gadjet ini dilanjutkan untuk memberbaiki label.

Langkah 2: Arahkan ke Layout> Edit Html

Langkah 3: Jangan d'ceklis checkbox yang mengatakan 'Expand Widget Templates'

Langkah 4: Sekarang Cari :


]]></b:skin>

dan rubah dengan :

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

Ini adalah bagian CSS yang mendefinisikan tampilan dan nuansa halaman navigation. Anda dapat memodifikasi sesuai dengan kebutuhan Anda
Langkah 5: Berikutnya adalah JavaScript. Dan Cari :

</body>

Kemudian ganti dengan :

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!--Page Navigation Ends -->
</body>

Seperti yang Anda lihat, ada beberapa parameter disesuaikan dalam kode ini :

var pageCount = 5;

Kode ini menentukan jumlah posting yang akan ditampilkan per halaman.

var displayPageNum = 5;

Kode ini menentukan jumlah nomor navigasi halaman tambahan yang akan ditampilkan pada halaman.

var upPageWord = 'Previous';
var downPageWord = 'Next';

Dua baris ini menentukan teks yang akan ditampilkan untuk halaman sebelumnya dan berikutnya masing-masing halaman.

Semoga bermanfaat !!

sumber : http://www.geekblogger.org/2009/11/page-navigation-for-blogger-paging-in.html