Assuming you are using Ditto 2:
&summarize = number of results per page
&paginate = 1
&paginateAlwaysShowLinks= 1
Then add this after the Ditto call:
<p>Showing <strong>[+start+]</strong> - <strong>[+stop+]</strong> of <strong>[+total+]</strong> Articles | Page <strong>[+currentPage+]</strong> of <strong>[+totalPages+]</strong></p> <div id="ditto_pages"> [+previous+] [+pages+] [+next+] </div> </div>
And here is some example CSS to get you started:
.ditto_paging {
border-top: 1px solid #ccc;
padding: 10px;
font-size: 86%;
color: black;
}
#ditto_pages .ditto_currentpage {
border: 1px solid black;
padding: 1px 5px 2px;
margin-right: 1px;
background-color: #008CBA;
color: #fff;
}
#ditto_pages .ditto_off {
border: 1px solid #ccc;
padding: 1px 5px 2px;
margin-right: 1px;
color: #ccc;
}
#ditto_pages a, #ditto_pages a:link, #ditto_pages a:visited {
border: 1px solid #008CBA;
padding: 1px 5px 2px;
margin-right: 1px;
text-decoration: none !important;
color: black;
}
#ditto_pages a:hover {
background-color: #fff;
color: #000;
}
Updated: Added example CSS.
