Install this plugin:
Prime Strategy Page Navi (https://wordpress.org/plugins/prime-strategy-page-navi/)

Kode di index.php, category.php, archieve.php
<?php if ( function_exists( 'page_navi' ) ) page_navi( 'items=7&prev_label=Prev&next_label=Next&first_label=First&last_label=Last&show_num=1&num_position=after' ); ?>

Kode di style.css
/* =STAR Style for Prime Strategy Page Navi
----------------------------------------------- */
.page_navi {
    text-align: center;
}
.page_navi li {
    display: inline;
    list-style: none;
}
.page_navi li.current span {
    color: #000;
    font-weight: bold;
    display: inline-block;
    padding: 3px 7px;
    background: #fee;
    border: solid 1px #fcc;
}
.page_navi li a {
    color: #333;
    padding: 3px 7px;
    background: #eee;
    display: inline-block;
    border: solid 1px #999;
    text-decoration: none;
}
.page_navi li a:hover {
    color: #f00;
}
.page_navi li.page_nums span {
    color: #fff;
    padding: 3px 7px;
    background: #666;
    display: inline-block;
    border: solid 1px #333;
}
/* =END Style for Prime Strategy Page Navi
----------------------------------------------- */