Cara Buat Page Navigation Pada Blog

Berikut adalah cara untuk membuat Page Navigation pada Blog. Apa itu page navigation yang di maksudkan? page navigation atau navigasi adalah satu widget atau lebih tepat adalah Javascript bagi memudahkan anda beralih dari page depan blog ke page blog yang kedua ataupun boleh jump page ke page mana yang anda inginkan. Script ini adalah bagi menggantikan Link "Olderst.. Home Newerst.." pada kaki di setiap blog. Bagi anda yang tidak menggunakan simbol atau icon boleh cuba cara seperti di bawah..

Contoh Page Navigation di gunakan di Silenblogz

Anda masih lagi boleh mencuba cara Page Navigation ini kerana dengan cara ini blog anda akan kelihatan agak profesional (citarasa masing-masing) berbanding dekorasi menggunakan icon ataupun membiarkan tanpa menggunakan apa-apa widget. Berdasarkan testimonial didapati loding blog akan menjadi lebih cepat berbanding menggunakan icon atau image. Ramai yang menggunakan image atau icon sebagai page navigation sedangkan kurang di antara kita mengambil berat tentang saiz gambar tersebut. Apa yang kita sering pratikkan cuma mengubah kelebaran dan ketinggian sahaja.

Berikut adalah cara buat Page Navigation Pada Blog :

1. Login Dashboard
2. Edit html
3. Expand Widget Templates [#]
4. Sila tekan Ctrl + F (serentak) atau cari kod ini :
   

   ]]></b:skin>

Apabila dah jumpa kod ini : ]]></b:skin>

Langkah Pertama :
- Sila gantikan (replaced) kod tersebut dengan kod di bawah :

.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666;
  text-decoration: none;
  }

]]></b:skin>

Seterusnya Sila tekan Ctrl + F (serentak) atau cari kod ini : </body>
Apabila dah jumpa kod ini : </body>

Langkah Kedua :
- Sila gantikan (replaced) kod tersebut dengan kod di bawah :

&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='silence-blogz.googlecode.com/files/pagenavigation.js' type='text/javascript'&gt;&lt;/script&gt;
</body>

Sila tukarkan mengikut setting blog anda :
var postperpage=7;
var numshowpage=4;

Postperpage = Berapa jumlah Entry yg anda set di muka depan blog.
numshowpage = Berapa banyak nombor yg nak di paparkan di blog (disyorkan jangan di ubah)

Kemudian preview dulu untuk lihat hasilnya.. kalau berpuas hati sila simpan..

javascript tutorial tutorial blog 9/22/2012 04:06:00 am