Cara Mengganti Tulisan Home, Previous Dan Next Dengan Angka

Cara Mengganti Tulisan Home, Previous Dan Next Dengan Angka. Maksud dari tutorial ini adalah saya akan mengajarkan anda untuk mengedit blog, tepatnya mengubah blog pager menjadi navigasi angka. Blog pager adalah tautan yang berisi link seperti Older Post, Newer Post dan sebagainya. Nah, hal itu bisa kita ganti dengan angka. Supaya pengunjung dapat mudah untuk mencari page mana yang dibutuhkan. Blog pager angka ini seperti gambar dibawah.

Untuk kali ini, saya sudah memberikan CSS berupa warna pada navigasi ini. Mungkin saya cukupkan sedikit ulasan tentang blog pager angka ini. Mari kita simak tutorial nya.

Cara Mengganti Tulisan Home, Previous Dan Next Dengan Angka

1. Login ke akun blogger anda, lalu ke Template, Edit HTML
2. Cari kode </body> bisa menggunakan CTRL + F
3. Copy kode dibawah ini lalu pastekan diatas kode </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>

Catatan :

• Langkah ini bertujuan untuk menampilkan angka - angka setelah tulisan home/beranda dan older post/postingan lama tampil duluan.
• Pada kalimat "var pageCount=5; " dan "var displayPageNum=5; ", angka 5 bisa diganti dengan angka yang ditampilkan sampai nomer berapa
• Lalu, kata Previous bisa diganti dengan kata yang berarti "sebelumnya"
• Sama juga pada kata Next, bisa diganti dengan kata lainnya yange berarti "postingan terbaru"

4. Cari kode ]]></b:skin> dengan menggunakan F3 atau CTRL + F
5. Copy kode CSS dibawah ini, lalu paste diatas 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;
}

• Untuk langkah yang satu ini, berfungsi mengatur tampilan angka, home dan older post dengan memberikan tampilan warna putih dan abu abu

6. Klik Simpan Template

Bagaimana? cukup mudah kan untuk Cara Mengganti Tulisan Home, Previous Dan Next Dengan Angka? Artikel ini sebenarnya saya buat karena merasa ini sangat pengting untuk blog dan dapat membuat blog tambah bagus. Apabila ada pertanyaan mengenai langkah langkah diatas, anda bisa tanyakan lewat komentar.