Cara Membuat Page Number Di Blogspot

Untuk mempercantik blog kita di blogspot memang kita melakukannya secara manual. Dan kali ini untuk mempercantik tampilan blog kita, kita akan membahas cara membuat page number di blogspot atau cara membuat halaman blog di blogspot.

Sobat pasti tau sendiri kalau pada template Blogspot umumnya hanya menggunakan navigasi Previous dan Next atau Posting lebih baru dan Posting Lama yang di selipkan dibagian bawah postingan blog, dimana fungsinya adalah untuk membantu pembaca/pengunjung berganti halaman postingan menuju tulisan sebelum atau setelah dari tulisan yang sedang dibaca tanpa ada keterangan nomor halaman berapa kita berada. Contohnya perhatikan pada bagian bawah blog sobat yang hanya ada tulisan Previous dan Next atau Posting lebih baru dan Posting Lama.

Tapi kalau page numbernya sudah di pasang maka tampilannya akan berubah seperti gambar di bawah ini:



Nah, cara membuat page number di blogspot atau blogger, ikuti langkah-langkah berikut ini:
  • Seperti biasa, Login ke dasbor blogger sobat.
  • Klik menu Rancangan.
  • Klik Edit HTML.
  • Lalu klik Expand Template Widget.
  • Cari kode  ]]></b:skin>
  • Kemudian masukan kode script yang ada di bawah ini tepat di atas kode: ]]></b:skin>

.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;
}

  • Selanjutnya cari lagi kode </body>
  • Lalu masukan kode script berikut tepat di atas kode: </body>

<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>


Keterangan :
  • Kode pageCount di atas adalah menunjukkan jumlah tulisan/posting/artikel yang akan ditampilkan dalam satu halaman.
  • Kode displayPageNum adalah menunjukkan jumlah nomor halaman yang ditampilkan (jika diisi dengan angka 7 berarti nomor halaman yang muncul ada 8, ditambah satu untuk halaman satu).
  • Kode upPageWord adalah untuk mengarahkan kita ke halaman yang lebih baru (tulisan Previous bisa diganti sesuai dengan keinginan).
  • Kode downPageWord adalah untuk mengarahkan ke halaman yang lebih lama (tulisan Next bisa diganti sesuai dengan keinginan).

  • Terakhir kita cari kode script berikut: 'data:label.url'
  • Gantilah kode script di atas dengan kode dibawah ini:

'data:label.url + &quot;?&amp;max-results=5&quot;'

  • Setelah selesai maka silahkan simpan template sobat dengan mengklik SIMPAN TEMPLATE.


Keterangan :
Fungsi dari script di atas adalah untuk mengganti tampilan default Blogspot yang akan menampilkan 20 postingan setiap halamannya. Namun karena pada pageCount di atas kita isi angka 5, maka pada script ini juga kita harus isi dengan dengan angka 5 (menampilkan 5 posting per halaman). Dan kalau kita ganti dengan angka lain, maka kita juga harus mengganti semua angka 5 di atas.

Nah, inilah dia tutorial atau tips  cara membuat page number di blogspot atau cara membuat halaman blog di blogspot

0 komentar :