Showing posts with label Numbered Page Navigation. Show all posts
Showing posts with label Numbered Page Navigation. Show all posts

Sunday, 19 January 2014

Tutorial Numbered Page Navigation

Assalamualaikum.. Hai u'olls, setelah sekian lama kini muncul kembali dengan tutorial baru. Kali ni nak buat tutorial numbered page. Dah tak pakai dah home, next & previous tu. Kita pakai number pulak. Tapi cun punya. Korang boleh buat ikut warna blog korang macam yang BCC buat ni. 
Biasa punya.
Bila halakan cursor. Warna berubah pada number 4.

1. Dashboard > Layout > Add Gadget/HTML
2. Copy code ini. Tekan Ctrl+C untuk Copy

<style type="text/css">
.blog-pager,#blog-pager{
font-family:arial, serif;
font-weight:bold;
font-size:12px;
width:98%;}



.showpageNum a,.showpage a {

background: #95fedb repeat-x;
background-position:0px -0px;
border:3px solid #F8BDBB;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:0px 1px 0 1px;
padding:3px 10px;
color:#000;
line-height:30px;
cursor:pointer;}



.showpageNum a:hover,.showpage a:hover {

background: #F8BDBB repeat-x;
background-position:0px -30px;
border:3px solid #95fedb;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
color:#fff;
-text-decoration:underline;}



.showpageOf{

margin:0 8px 0 0;
background:#95fedb repeat-x;
background-position:0px -0px;
border:3px solid #F8BDBB;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
line-height:30px;
padding:3px 10px;
color:#000;}



.showpagePoint {

background:#F8BDBB repeat-x;
background-position:0px -30px;
margin:0 3px 0 3px;
padding:3px 10px;
line-height:30px;
cursor:pointer;
white-space:nowrap;
border:3px solid #95fedb;
-webkit-border-radius:3px; 
-moz-border-radius:3px;
border-radius:3px;
color:#fff;
text-decoration:underline;
font-weight:bold;
 </style>



<script type='text/javascript'>

//<![CDATA[
    var postperpage=2;
    var numshowpage=4;
    var upPageWord ='« Prev ';
    var downPageWord ='Next »';
    var urlactivepage=location.href;
    var home_page="/";



//]]>

</script>



<script type='text/javascript'src='https://dl.dropboxusercontent.com/s/msf4tmk4gr7gzs9/navipage-faiz-tutorial.js'></script>

3. Yang berwarna MERAH adalah untuk background. Yang berwarna HIJAU adalah untuk bolder & yang berwarna BIRU untuk tulisan.
4. Yang berwarna OREN adalah untuk entry disetiap halaman. Macam BCC ada 2. So BCC letak 2. Kalau korang ada 3, letak 3.

Preview dulu. Kalau menjadi bolehlah save :D.
Tutorial sebenar - Faiz Tutorial
Di Ubah Oleh - Cik Hawa Comel