22 April 2010
Page Navigation Pada Bawah Blog
hak milik
Sue
Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak buat page navigation pada bawah blog.
1. Login ke Blogspot .
2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)
3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .
]]></b:skin>
4. Copy kod di bawah
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #919106;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1iwUQf26A8865Hd-5TSjXwcEPUgkfxg5qRiY2ki5H5xoDs6rRIkTAWE1BtgbwC9_jklOeM87jfjZsnNjOTnjUD7FbxGsYQlKwF6I11HmTu8sxy3J3QtLK1DlnOpbFi96ZFK83gS6lEDU/s400/wp2.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1iwUQf26A8865Hd-5TSjXwcEPUgkfxg5qRiY2ki5H5xoDs6rRIkTAWE1BtgbwC9_jklOeM87jfjZsnNjOTnjUD7FbxGsYQlKwF6I11HmTu8sxy3J3QtLK1DlnOpbFi96ZFK83gS6lEDU/s400/wp2.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.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 #919106;
background: #666 url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1iwUQf26A8865Hd-5TSjXwcEPUgkfxg5qRiY2ki5H5xoDs6rRIkTAWE1BtgbwC9_jklOeM87jfjZsnNjOTnjUD7FbxGsYQlKwF6I11HmTu8sxy3J3QtLK1DlnOpbFi96ZFK83gS6lEDU/s400/wp2.jpg) 0 0 repeat-x;
text-decoration: none;
}
5. Pastekan diatasnya
6. Cari kod di bawah
</body>
7. Copy kod di bawah
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://sites.google.com/site/testsajasite/pagenav.js' type='text/javascript'></script>
8. Pastekan diatasnya
9. Cari kod di bawah
'data:label.url'
10. Gantikan dengan kod dibawah ini .
'data:label.url + "?&max-results=7"'
Note: Pada highlight merah korang boleh tukarkan mengikut jumlah post pada muka depan blog korang .
11. Preview dan Save template .
1. Login ke Blogspot .
2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)
3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .
]]></b:skin>
4. Copy kod di bawah
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #919106;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1iwUQf26A8865Hd-5TSjXwcEPUgkfxg5qRiY2ki5H5xoDs6rRIkTAWE1BtgbwC9_jklOeM87jfjZsnNjOTnjUD7FbxGsYQlKwF6I11HmTu8sxy3J3QtLK1DlnOpbFi96ZFK83gS6lEDU/s400/wp2.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1iwUQf26A8865Hd-5TSjXwcEPUgkfxg5qRiY2ki5H5xoDs6rRIkTAWE1BtgbwC9_jklOeM87jfjZsnNjOTnjUD7FbxGsYQlKwF6I11HmTu8sxy3J3QtLK1DlnOpbFi96ZFK83gS6lEDU/s400/wp2.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.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 #919106;
background: #666 url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1iwUQf26A8865Hd-5TSjXwcEPUgkfxg5qRiY2ki5H5xoDs6rRIkTAWE1BtgbwC9_jklOeM87jfjZsnNjOTnjUD7FbxGsYQlKwF6I11HmTu8sxy3J3QtLK1DlnOpbFi96ZFK83gS6lEDU/s400/wp2.jpg) 0 0 repeat-x;
text-decoration: none;
}
5. Pastekan diatasnya
6. Cari kod di bawah
</body>
7. Copy kod di bawah
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://sites.google.com/site/testsajasite/pagenav.js' type='text/javascript'></script>
8. Pastekan diatasnya
9. Cari kod di bawah
'data:label.url'
10. Gantikan dengan kod dibawah ini .
'data:label.url + "?&max-results=7"'
Note: Pada highlight merah korang boleh tukarkan mengikut jumlah post pada muka depan blog korang .
11. Preview dan Save template .