Cara Membuat Page Numbering With CSS3 Effect

Cara Membuat Page Numbering With CSS3 Effect - Hadir kembali menyuguhkan tutorial blogspot nih. Page Numbering adalah sebuah menu yang wajib kamu pasang di blog. Apalagi blog kamu sudah memiliki ratusan postingan, wajib banget. Sebab, dengan memasang Page Numbering maka pengunjung akan lebih mudah melihat postingan lama mu. Untuk Demo nya bisa liat pada gambar berikut. Dijamin keren deh, dan ada CSS3 nya, sehingga blog kamu akan lebih friendly. Mau coba? Ikuti deh yang satu ini

Page Numbering With CSS3 Effect

Cara Membuat Page Numbering With CSS3 Effect
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

Other link :

Share on...