Pagination

Create page numbers in your webpages.

CSS/JS files (add code to <HEAD> section):


<!-- DC Pagination CSS -->
<link type="text/css" rel="stylesheet" href="dreamcodes/pagination/css/tsc_pagination.css" />

          

Pagination style 1

View code:


<!-- DC Pagination:A1 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA01">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A1 End -->

View code:


<!-- DC Pagination:A2 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA02">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A2 End -->

View code:


<!-- DC Pagination:A3 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA03">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A3 End -->

View code:


<!-- DC Pagination:A4 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA04">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A4 End -->

View code:


<!-- DC Pagination:A5 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA05">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A5 End -->

View code:


<!-- DC Pagination:A6 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA06">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A6 End -->

View code:


<!-- DC Pagination:A7 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA07">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A7 End -->

View code:


<!-- DC Pagination:A8 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA08">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A8 End -->

View code:


<!-- DC Pagination:A9 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA09">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A9 End -->

View code:


<!-- DC Pagination:A10 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA10">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A10 End -->

View code:


<!-- DC Pagination:A11 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA11">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A11 End -->

View code:


<!-- DC Pagination:A12 Start -->
<ul class="tsc_pagination tsc_paginationA tsc_paginationA12">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:A12 End -->

Pagination style 2

View code:


<!-- DC Pagination:B1 Start -->
<ul class="tsc_pagination tsc_paginationB tsc_paginationB01">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:B1 End -->

View code:


<!-- DC Pagination:B2 Start -->
<ul class="tsc_pagination tsc_paginationB tsc_paginationB02">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:B2 End -->

View code:


<!-- DC Pagination:B3 Start -->
<ul class="tsc_pagination tsc_paginationB tsc_paginationB03">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:B3 End -->

View code:


<!-- DC Pagination:B4 Start -->
<ul class="tsc_pagination tsc_paginationB tsc_paginationB04">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:B4 End -->

View code:


<!-- DC Pagination:B5 Start -->
<ul class="tsc_pagination tsc_paginationB tsc_paginationB05">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:B5 End -->

View code:


<!-- DC Pagination:B6 Start -->
<ul class="tsc_pagination tsc_paginationB tsc_paginationB06">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:B6 Start -->

View code:


<!-- DC Pagination:B7 Start -->
<ul class="tsc_pagination tsc_paginationB tsc_paginationB07">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:B7 Start -->

View code:


<!-- DC Pagination:B8 Start -->
<ul class="tsc_pagination tsc_paginationB tsc_paginationB08">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:B8 Start -->

View code:


<!-- DC Pagination:B9 Start -->
<ul class="tsc_pagination tsc_paginationB tsc_paginationB09">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:B9 Start -->

View code:


<!-- DC Pagination:B10 Start -->
<ul class="tsc_pagination tsc_paginationB tsc_paginationB10">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:B10 Start -->

Pagination style 3

View code:


<!-- DC Pagination:C1 Start -->
<ul class="tsc_pagination tsc_paginationC tsc_paginationC01">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:C1 End -->

View code:


<!-- DC Pagination:C2 Start -->
<ul class="tsc_pagination tsc_paginationC tsc_paginationC02">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:C2 End -->

View code:


<!-- DC Pagination:C3 Start -->
<ul class="tsc_pagination tsc_paginationC tsc_paginationC03">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:C3 End -->

View code:


<!-- DC Pagination:C4 Start -->
<ul class="tsc_pagination tsc_paginationC tsc_paginationC04">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:C4 End -->

View code:


<!-- DC Pagination:C5 Start -->
<ul class="tsc_pagination tsc_paginationC tsc_paginationC05">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:C5 End -->

View code:


<!-- DC Pagination:C6 Start -->
<ul class="tsc_pagination tsc_paginationC tsc_paginationC06">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:C6 End -->

View code:


<!-- DC Pagination:C7 Start -->
<ul class="tsc_pagination tsc_paginationC tsc_paginationC07">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:C7 End -->

View code:


<!-- DC Pagination:C8 Start -->
<ul class="tsc_pagination tsc_paginationC tsc_paginationC08">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:C8 End -->

View code:


<!-- DC Pagination:C9 Start -->
<ul class="tsc_pagination tsc_paginationC tsc_paginationC09">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:C9 End -->

View code:


<!-- DC Pagination:C10 Start -->
<ul class="tsc_pagination tsc_paginationC tsc_paginationC10">
  <li><a href="#" class="first">First</a></li>
  <li><a href="#" class="previous">Previous</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#" class="current">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#" class="next">Next</a></li>
  <li><a href="#" class="last">Last</a></li>
</ul>
<!-- DC Pagination:C10 End -->



© TemplateAccess