Menambah Tombol Navigasi Next Archive Previous di Jekyll bagian II

Pada artikel sebelumnya, sudah ditulis caranya. Namun, saya kurang puas dengan hasilnya.

Nah, suatu ketika saya berkunjung ke blog teman, navigasinya bagus eui.. bentuknya tombol. Kemudian saya putuskan untuk meniru dari blog teman saya. Berikut ini source code nya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="page-navigation">
      <ul>
      {% if page.previous %}
        <li class="previous"><a href="{{page.previous.url}}" title="{{ page.previous.title }}">&larr; Previous</a></li>
      {% else %}
        <li class="previous disabled"><a>&larr; Previous</a></li>
      {% endif %}
        <li><a href="{{site.baseurl}}/archive/">Archive</a></li>
      {% if page.next %}
        <li class="next"><a href="{{page.next.url}}" title="{{ page.next.title }}">Next &rarr;</a></li>
      {% else %}
        <li class="next disabled"><a>Next &rarr;</a>
      {% endif %}
      </ul>
 </div>

nah berikut ini kode ‘css’ biar jadi cantik

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.page-navigation {
    height:20px;
    margin:18px 0;
    display: block;
    text-align: center;
}
.page-navigation ul {
    padding:0;
    display: inline-block;
    margin:0;
    border:1px solid #ddd;
    border:1px solid rgba(0,0,0,0.15);
    border-radius:3px;
    box-shadow:0 1px 2px rgba(0,0,0,0.05);
    text-align: center;

}

.page-navigation li {
    display:inline
}
.page-navigation a {
    float:left;
    padding:0 14px;
    line-height:34px;
    border-right:1px solid;
    border-right-color:#ddd;
    border-right-color:rgba(0,0,0,.15)
}
.page-navigation a:hover {
    background-color:#eee
}
.page-navigation .disabled a,.page-navigation .disabled a:hover {
    background-color:transparent;
    color:#968896
}
.page-navigation .next a {
    border:0
}

Hasilnya, seperti yang anda lihat di bawah post ini. :+1: