--- a/default/blog/articles.html	Fri Jan 12 19:53:18 2018 +0100
+++ b/default/blog/articles.html	Fri Jan 12 22:05:32 2018 +0100
@@ -6,4 +6,24 @@
 <div id="blog_items">
     {{ blog.show_items(items) }}
 </div>
+<nav class="bottom_links">
+    <ul>
+        {% if newer_url is defined %}
+            <li class="newer_items">
+                <a href="{{newer_url}}">
+                    <img src="{{media_path}}icons/tango/actions/32/go-previous.png">
+                    {% trans %}newer articles{% endtrans %}
+                </a>
+            </li>
+        {% endif %}
+        {% if older_url is defined %}
+            <li class="older_items">
+                <a href="{{older_url}}">
+                    <img src="{{media_path}}icons/tango/actions/32/go-next.png">
+                    {% trans %}older articles{% endtrans %}
+                </a>
+            </li>
+        {% endif %}
+    </ul>
+</nav>
 {% endblock body %}

--- a/default/static/blog.css	Fri Jan 12 19:53:18 2018 +0100
+++ b/default/static/blog.css	Fri Jan 12 22:05:32 2018 +0100
@@ -48,6 +48,44 @@
     margin: 0;
 }
 
+/** navigation links **/
+
+.bottom_links ul {
+	list-style: none;
+    display: flex;
+    padding: 0 2em;
+    margin: 0;
+}
+
+.bottom_links li {
+    flex: 1;
+}
+
+.bottom_links li.older_items {
+    text-align: right;
+}
+
+.bottom_links img {
+    display: block;
+}
+
+.bottom_links .older_items img {
+    display: block;
+    margin-left: auto;
+    margin-right: 0;
+}
+
+.bottom_links a {
+	display: inline-block;
+	text-decoration: None;
+	color: inherit;
+	font-variant: small-caps;
+}
+
+.bottom_links a:hover {
+    background-color: #ddd;
+}
+
 /** reduce/expand buttons **/
 
 .expand_box {
@@ -221,6 +259,10 @@
         padding: 0.5em;
     }
 
+    .bottom_links ul {
+        padding: 0 6em;
+    }
+
 }
 
 /*** clicked ***/