Cari Apa Ya: Membuat Number Page Navigation Blogspot

Friday, June 17, 2011

Membuat Number Page Navigation Blogspot

Posted by Sibuk Banget |

|

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.

edit html

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=9;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

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.