Membuat Number Page Navigation Blogspot

Umumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.

CSS

Silahkan anda masuk ke halaman HTML blogspot. Karena disini kita akan menambahkan serangkaian kode CSS dan Javascript di dalamnya.

Carilah kode ]]></b:skin> , dan letakan kode CSS berikut ini diatas nya.

/* -- NUMBER PAGE NAVIGATION -- */
.totalpages{color:#333; padding-right:7px}

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;}

.showpageArea a{text-decoration:none}

.showpageNum a{padding:1px 8px; margin:0 4px; text-decoration:none; border:1px solid #CDCDCD; background:#fff; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpageNum a:hover{border:1px solid #CDCDCD; background:#DDD}

.showpagePoint{color:#333; text-shadow:#333 0 1px 2px; padding:1px 8px; margin:2px; font-weight:bold; border:1px solid #FF9900; background:#FFBF00; text-decoration:none;-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpageOf{margin:0 8px 0 0}

.showpage a{padding:1px 8px; margin:0 2px; text-decoration:none; border:1px solid #CDCDCD; background:#fff;-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpage a:hover{color:#fff; text-shadow:#333 0 1px 2px; padding:1px 8px; margin:2px; font-weight:bold; border:1px solid #CDCDCD; background:#DDD; text-decoration:none;-moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}

.showpageNum a:link, .showpage a:link{text-decoration:none; color:#333}

Javascript

Selanjutnya, carilah kode </body> .
Masukan kode javascript berikut ini diatas nya.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=9;
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-->

Keterangan :
var pageCount=9; » Varian tersebut menjelaskan bahwa setiap halaman akan menampilkan 9 postingan / artikel.

var displayPageNum=5; » Varian tersebut menjelaskan jumlah page number ( contoh : 1, 2 , 3 , 4, 5 » Next )

Anda bebas mengubah varian tersebut sesuai dengan kebutuhan.

Setelah semua selesai, coba anda lihat dulu hasilnya dengan menekan tombol Preview.

Apabila tampilan Navigasi tersebut muncul dan tidak terjadi error, silahkan SAVE TEMPLATE anda.

Share this history on :

Tweet

Title : Membuat Number Page Navigation Blogspot
URL : http://blogcunayz.blogspot.com/2011/06/membuat-number-page-navigation-blogspot.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Membuat Number Page Navigation Blogspot sebagai Sumbernya.