Sunday, January 19, 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.


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


No comments:

Post a Comment