Site Search:

How to add css pagination to blogger post in 5 minutes


add the following code into your post HTML, put at the top

<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>

<ul class="pagination">
  <li><a href="http://xyzcode.blogspot.com/2016/04/flash-card-one.html">«</a></li>
  <li><a href="">1</a></li>
  <li><a class="active" href="http://xyzcode.blogspot.com/2016/04/flash-card-list-1-question-2.html">2</a></li>
  <li><a href="http://xyzcode.blogspot.com/2016/04/flash-card-list-1-card-3.html">3</a></li>
  <li><a href="http://xyzcode.blogspot.com/2016/04/flash-card-list-1-card-4.html">4</a></li>
  <li><a href="http://xyzcode.blogspot.com/2016/04/flash-card-list-1-card-5.html">5</a></li>
  <li><a href="http://xyzcode.blogspot.com/2016/04/flash-card-list-1-card-6.html">6</a></li>
  <li><a href="http://xyzcode.blogspot.com/2016/04/flash-card-list-1-card-7.html">7</a></li>
  <li><a href="http://xyzcode.blogspot.com/2016/04/flash-card-list-1-card-8.html">»</a></li>
</ul>