Cara Membuat Tombol Next Page Ver.2

Kali ini kita menggunakan CSS. beda sama versi pertama,.. dalam versi pertama code bisa diterapkan apabila template sesuai dengan code yang kita tambahkan, sedangkan untuk code berikut bisa digunakan di semua templete..
1. Buka Layout - Edit HTML - Expand Widget Templates
2. Copy kode tersebut dibawah  </body>


<!--PAGINATION-STARTS-->
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=4;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination1.js' type='text/javascript'/>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.js' type='text/javascript'/>
<!--PAGINATION-STOPS-->

Setelah Copy code di atas, lanjutkan copy code dibawah ini sebelum  </head>


<!--PAGINATION-STARTS-->
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.css' rel='stylesheet' type='text/css'/>
<style type='text/css'>
.showpage a:hover {
color: #fff;
background-color: #F28C28;
}
.showpagePoint {
border: 1px solid #F28C28;
color: #fff;
background: #F28C28 !important;
}
.showpageNum a:link,.showpage a:link {
border: 1px solid #F28C28;
color: #000 !important;
background-color: #FFFFFF;
}
.showpageNum a:hover {
border: 1px solid #F28C28;
color: #fff !important;
background: #F28C28;
}
.showpageArea a {
border: 1px solid #F28C28;
}
.showpageArea a:hover {
border: 1px solid #F28C28;
color: #fff !important;
background: #F28C28 !important;
}

</style>
<!--PAGINATION-STOPS-->

Nah beres... coba lihat de bawah posting kalian..... selanjutnya atur jah sendiri (nomor,warna)..

Artikel Terkait Lainnya