Desain menarik! Cara membuat pagination atau navigation menggunakan css

Seperti kita ketahui bahwa sebuah website tanpa pagination atau navigation ibarat artikel tanpa tujuan Hahaha.. Nah, kali ini saya akan share tentang bagaimana cara membuat desain navigasi keren menggunakan tampilan thumbnail seperti gambar diatas.

Bagaimana jadinya kalau suatu website tidak ada navigasi? mau lihat artikel lain lewat apa? Ribet bukan kalau harus edit isi tema blog orang bahkan males cari artikel selanjutnya bukan? Pilihan tepat merubah tampilan navigasi dengan tampilan thumbnail, mungkin jarang-jarang orang share tentang bagaimana modifikasi navigasi biar terlihat minimalist agar terkesan up-to-date

Penasaran bagaimana cara membuatnya?
Yuk, kita bahas kali ini!

Baca juga : cara membuat scrolling effect di template, theme blog atau website

Pertama-tama backup terlebih dahulu template Anda sebelum menerapkan ke website Anda.

Kemudian cari <nav dan ubah kode tersebut dengan kode dibawah ini
<nav class="navigation post-navigation" role="navigation"> <h1 class="screen-reader-text">Post navigation</h1><div class="nav-links"> <!-- Navigation next previous --> <div class="nav nav-previous"> <a href="#" rel="prev"> <span class="thumbnail"></span> <span class="label">Previous</span> <span class="title">Material Design Web Tutorial: Raised Button with Ripple Effect</span> </a> </div><div class="nav nav-next"> <a href="#" rel="next"> <span class="thumbnail"></span> <span class="label">Next</span> <span class="title">MonsterAdmin Template with a Touch of Material Design</span> </a> </div></div><!-- .nav-links --> </nav>

Ingat, sebelum edit template Anda backup terlebih dahulu sebelum Anda salah menerapkan kode html diatas, bila dirasa paham mari kita lanjutkan menambahkan css. Untuk menambahkan css tambahkan css dibawah ini dan taruh di template Anda

<style>/* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 1.4rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } .post-navigation { padding: 15px 0 0; } .post-navigation .nav { display: block; margin-bottom: 15px; } .post-navigation .nav a { text-decoration: none; display: block; padding: 15px; background: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); position: relative; } .post-navigation .nav a:hover { box-shadow: 0 6px 20px #00EBFF; } .post-navigation .nav .thumbnail { display: none; position: absolute; top: 0; left: 0; bottom: 0; width: 125px; content: ''; } .post-navigation .nav .label { display: block; font-size: 15px; font-size: 1.5rem; } .post-navigation .nav .title { display: block; color: #2F2F2F; } .post-navigation { padding: 30px 0 15px; } .post-navigation .nav { display: inline-block; width: 49%; vertical-align: top; } .post-navigation .nav.nav-previous { margin-right: 2%; } .post-navigation .nav a { height: 150px; } .post-navigation .nav .label { font-size: 20px; font-size: 2rem; margin-bottom: 5px; } .post-navigation .nav .title { font-size: 15px; font-size: 1.5rem; line-height: 1.3; height: 90px; /* standard 85px*/ overflow: hidden; } .post-navigation .nav.nav-next { text-align: right; } .post-navigation .nav.nav-next .thumbnail { left: auto; right: 0; } } </style> <style type='text/css'>/* nav previous */ .post-navigation .nav-previous .thumbnail{ display: block; background-image: url(http://materialdesignblog.com/wp-content/uploads/2016/02/tutorial-raised-button-1.png); background-size: cover; } .post-navigation .nav-previous a{ padding-left: 140px } @media screen and ( min-width: 760px ){ .post-navigation .nav-previous .thumbnail{ width: 150px } .post-navigation .nav-previous a{ padding-left: 170px; padding-right: 15px; } } /* nav next */ .post-navigation .nav-next .thumbnail{ display: block; background-image: url(http://materialdesignblog.com/wp-content/uploads/2016/03/58393-original-1.jpg); background-size: cover; } .post-navigation .nav-next a{ padding-left: 140px } @media screen and ( min-width: 760px ){ .post-navigation .nav-next .thumbnail{ width: 150px } .post-navigation .nav-next a{ padding-right: 170px; padding-left: 15px; } } </style>

Untuk hasilnya akan seperti klik disini
Sekian penjelasan saya tentang membuat desain menarik pagination atau navigation menggunakan css, semoga bermanfaat