Memberi Jarak Pada Pagination Page Number Navigation Evo Magz - tipdantrik

Memberi Jarak Pada Pagination Page Number Navigation Evo Magz

Pagination atau yang biasa di sebut Page Number Navigasi merupakan sebuah tombol navigasi yang memberi kemudahan untuk berpindah halaman dari halaman satu ke halaman yang lain secara bebas sesuai keinginan.

Jadi, page number sangat membantu dalam memberikan jangkuan halaman yang lebih baik lagi bagi pengunjung.

Secara default/bawaan blogger page navigasi yang di sediakan hanya berupa 3 tombol yaitu tombol navigasi Home, Next dan Previous sedangkan untuk page number navigasi adalah hasil kreatifitas yang di buat oleh orang yang sudah expert dalam pembuatan sebuah website, theme, template pada suatu flatform. contoh flatform blogger.

Dari hasil karya mereka di jadikan sebagai acuan/pedoman untuk bereksperimen membentuk sebuah style page number navigasi yang di sesuaikan dengan tema atau selera setiap pengembang.

Sehubungan dengan hal ini, ada satu hal yang sangat menarik perhatian saya ketika mengakses tipdantrik dari view responsive yaitu pada bagian page number navigasi yang terlalu rapat atau tidak ada jarak antara tombol khususnya jarak bagian bawah.

Untuk lebih jelasnya seperti gambar di bawah ini:
Memberi Jarak Pada Pagination Page Number Navigation Evo Magz

Jarak ini memang sudah begini dari awal atau bawaan template evo magz, mungkin penyebabnya karena kurang di perhatikan ketika dalam masa percobaan sebelum di perjual belikan secara luas oleh pengembang dalam hal ini Mas Sugeng sebagai pemilik dan hak paten dari tema evo magz.

Disini saya cuma ingin memberikan sedikit perbaikan sehingga ketika di lihat dari view responsive akan memberikan kesan yang lebih baik khususnya pada jarak tombol.

  1. Buka Blogger-->Login-->Tema-->Edit HTML
  2. Lakukan pencarian kode dengan menekan tombol kombinasi pada keyboar CTRL+F, setelah itu cari MEDIA QUERY, dan perhatikan dibawahnya terdapat beberapa @media only screen
  3. Selanjutnya tambahkan kode CSS ini
    
    .displaypageNum a, .showpage a, .pagecurrent {
    	margin-bottom:5px;
    }
    
  4. Ke @media only screen and (max-width:640px)@media only screen and (max-width:480px), dan @media screen and (max-width:320px) sehingga kode yang telah di tambahkan hanya akan berlaku pada layar yang berukuran 640, 480, dan 320.
  5. Terakhir Simpan Perubahan.

Pagination Page Number Navigation Evo Magz
Hasil akhir

Untuk hasil bisa anda lihat melalui ponsel smartphone kurang lebih akan akan seperti gambar di atas.

Subscribe to receive free email updates:

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel