Cara membuat next page button dengan angka di blog (style ke-2)

Assalamualaikum.
Seperti yang kita ketahui bahwa tujuan pembuatan navigasi next page,previous page dengan angka di blog adalah untuk memudahkan para pengunjung blog dalam melihat artikel apa saja yang ada di blog yang kita miliki halaman demi halaman.
Untuk jumlah artikel atau posting di tiap satu halaman,kita dapat menentukannya sendiri,semakin banyak jumlah arikel dalam satu halaman maka loading blog akan semakin berat,begitu pula dengan sebaliknya.Untuk itu jumlah artikel pada satu halaman sebaiknya dibatasi maksimal 10 posting atau dibawahnya.
Beberapa saat yang lalu saya telah share cara membuat tombol navigasi next page dengan angka di blog,nah di kesempatan kali ini saya akan share cara membuat next page button dengan angka di blog tentunya dengan style yang berbeda atau saya namakan style ke-2 di blog ini.

Berikut cara membuat nextpage button dengan angka di blog (style yang ke-2)
1.Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda di www.blogger.com dengan menggunakan akun blogger yang anda miliki.
2.Setelah masuk ke halaman dashboard,silahkan anda klik nama blog yang anda miliki (apabila anda memiliki blog lebih dari 1).Contoh seperti gambar dibawah ini.

3.Di halaman berikutnya silahkan anda klik template,seperti contoh gambar dibawah ini.

4.Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.

5.Nanti anda akan bertemu dengan struktur kode-kode yang membentuk template blog anda.Silahkan anda cari kode ]]></b:skin>.Agar lebih mudah dalam pencarian kode anda bisa menggunakan CTRL+F (jika anda menggunakan komputer).
6.Silahkan anda masukkan kode CSS berikut ini tepat diatas kode ]]></b:skin>.

.showpageArea a{text-decoration:underline}
.showpageNum a{text-decoration:none;border:1px solid #ccc;margin:0 3px;padding:3px}
.showpageNum a:hover{border:1px solid #ccc;background-color:#ccc}
.showpagePoint{color:#333;text-decoration:none;border:1px solid #ccc;background:#ccc;margin:0 3px;padding:3px}
.showpageOf{text-decoration:none;padding:3px;margin:0 3px 0 0}
.showpage a{text-decoration:none;border:1px solid #ccc;padding:3px}
.showpage a:hover{text-decoration:none}
.showpageNum a:link,.showpage a:link{text-decoration:none;color:#333}

7.Berikutnya silahkan anda cari kode </body> lalu masukkan kode dan script berikut ini tepat diatasnya.

<!--Page Navigation Starts-->
<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>
<!--Page Navigation Ends -->

Tambahan:

• Kata prev dan next dapat anda ganti dengan kata yang anda inginkan.
• Angka 4 yang pertama adalah jumlah post yang ditampilkan untuk setiap page yang di klik.
• Angka 4 yang kedua adalah jumlah nomor yang ingin ditampilkan diarea homepage blog.

8.Jika sudah? silahkan anda klik simpan untuk menyimpan perubahan.

Silahkan anda kunjungi homepage (halaman utama blog anda) maka navigasi next page dengan angka kini telah muncul dibagian bawah post footer blog anda.
Bagaimana? cukup mudah bukan?
Demikianlah cara membuat next page button dengan angka di blog (style ke-2).
Semoga bermanfaat dan terimakasih telah berkunjung.
Assalamualaikum.

• Tweet
• Share
• Share
• Share
• Share