Cara Membuat Page Numbering Dengan Effect CSS3

Assalamu alaikum Wr. Wb.
Selamat malam sobat. Pada malam yang sejuk dan banyak nyamuk ini saya ingin share kepada sobat semua bagaimana cara Membuat page Numbering Dengan Effect CSS3 yang sangat berguna bagi para sobat blogger yang memiliki ratusan posting. Dengan para sobat memasang Page Numbering ini maka para
pengunjung akan lebih mudah untuk melihat postingan anda yang lama.

Untuk hasilnya nanti sobat bisa lihat gambar di bawah ini.

Langsung aja sobat begini cara nya.
1. Login ke blogger.com
2. Klik Rancangan --> Edit HTML, cari kode ]]></b:skin> dan masukkan kode berikut ini diatasnya :

.showpageArea a {
text-decoration: underline;
}

.showpageNum a {
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border: 1px solid gray;
margin: 0pt 3px;
padding: 3px;
text-decoration: none;
}

.showpageNum a:hover {
background: none repeat scroll 0% 0% red;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border: 1px solid #B6CFEA;
}

.showpagePoint {
background: none repeat scroll 0% 0% red;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border: 2px solid white;
color: gold;
margin: 0pt 3px;
padding: 3px;
text-decoration: none;
}

.showpageOf {
margin: 0pt 3px 0pt 0pt;
padding: 3px;
text-decoration: none;
}

.showpageArea a {
text-decoration: underline;
}

.showpageNum a {
border-bottom-right-radius: 8px;
border: 1px solid gray;
margin: 0pt 3px;
padding: 3px;
text-decoration: none;
}

.showpageNum a:hover {
background: none repeat scroll 0pt 0pt #B6CFEA;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border: 1px solid #B6CFEA;
}

.showpagePoint {
background: none repeat scroll 0pt 0pt #B6CFEA;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border: 2px solid white;
color: white;
margin: 0pt 3px;
padding: 3px;
text-decoration: none;
}

.showpageOf {
margin: 0pt 3px 0pt 0pt;
padding: 3px;
text-decoration: none;
}

.showpage a {
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border: 2px solid gray;
padding: 3px;
text-decoration: none;
}

.showpage a:hover {
background: none repeat scroll 0% 0% red;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border: 1px solid #B6CFEA;
text-decoration: none;
}

.showpageNum a:link, .showpage a:link {
color: thistle;
text-decoration: none;
}

3. Setelah itu silahkan cari kode </body> dan tempatkan kode berikut ini diatasnya :

<!--Page Navigation Starts-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=5;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://javascript16.googlecode.com/files/4jiepagenumbering.txt' type='text/javascript'/>
<!--Page Navigation Ends -->

4. Simpan

Sekian sobat postingan saya kali ini, terimakasih ya telah berkunjung ke blog ini.
Wassalam.