Rabu, 19 Januari 2011

Cara membuat page number ( Page 1 2 3 4 Next ) pada blog

Pada tampilan (template) bawaan dari blogger sebenarnya sudah ada keterangan untuk menemukan posting lama dari blog tersebut, tetapi apabila tampilan tersebut ingin dirubah dapat dilakukan dengan melakukan sedikit modifikasi pada bagian edit html, tujuannya adalah agar tampilan kita menjadi lebih bagus, contoh dari page number tersebut adalah sebagai berikut :






Langkah-langkahnya adalah sebagai berikut :
  • Masuk (sign in) keblog teman-teman, cari design (pengaturan), edit html, centang expand widget template tujuannya adalah agar semua code html dapat terlihat.
  • Temukan code html berikut ini :

]]></b:skin>

  "gunakan ctrl F, agar pencarian lebih mudah"
  • Copy code css berikut persis di atas code tersebut.
 "gunakan ctrl F, agar pencarian lebih mudah"
  • Copy code css berikut persis di atas code tersebut.
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

  •  Langkah selanjutnya temukan code berikut ini :
</body>
  • Copy script di bawah ini persis di atas code tersebut.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>


  • Langkah terakhir, temukan code di bawah ini :
'data:label.url'
  • Ganti code tersebut dengan code berikut ini :
'data:label.url + &quot;?&amp;max-results=5&quot;'
  • Simpan (save) template dan lihat hasilnya.

Tidak ada komentar:

Posting Komentar