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

5 comments:

Izyan Yan Cinnamon said...

thz hawa,baru nk tnya wat mcm mna page2 tu,tapi akk hawa dh buat,,tima kaseh sekali lagi hawa..:D

Little Milyy Shop said...

hehe . menjadik lah . Nak guna ^_^ mekasih :D

Nur Madihah said...

Daebak! Daj maju blog sekarang.. hehe

Nur Madihah said...

saay copy tuto ni ya. kredit utk awak :)

Anonymous said...

Menjadilah Kak Hawa. Tq byk2