Model Navigasi Halaman setiap template bervariasi model nya. Dan niscaya nya setiap template memiliki Navigasi halaman, walaupun terkadang fitur tersebut aku yakin jarang sekali pengunjung untuk mengeklik tombol navigasi halaman itu. Tapi yang niscaya navigasi halaman wajib dan memang harus ada di masing - masing template.
Apakah di template sahabat sudah ada navigasi halaman? Bila tidak ada segerahlah untuk memasang navigasi halaman untuk melengkapi fitur dari template yang sahabat gunakan. Dan di bawah ini aku akan mencoba mengembangkan bagaimana cara memasang Navigasi Halaman Yang Simple Model Nomer Di Blog Sobat.
Tapi kalau di template sahabat sudah ada mungkin model nya berbeda dari model yang navigasi halaman yang aku share ini dan sahabat ingin mencoba sesuatu yang gres atau mungkin untuk sebagai materi pembelajaran, sahabat dapat mengikuti tutorial di bawah ini.
Cara Membuat Navigasi Halaman Yang Simple Model Nomer Di Blog
Langkah pertama silahkan sahabat copy instruksi di bawah ini kemudian letakan instruksi tersebut di atas instruksi </body> pada template sobat. <b:if cond='data:view.isMultipleItems'> <script> //<![CDATA[ /* Page Navigation with Number */ var postperpage = 7; // Jumlah halaman yang tampil var numshowpage = 3; // Jumlah angka / nomor di sajian navigasi var upPageWord = 'Prev'; // Kata untuk navigasi halaman sebelumnya var downPageWord = 'Next'; // Kata untuk navigasi halaman berikutnya var urlactivepage = location.href; var home_page= '/'; //]]></script> <script src='https://cdn.rawgit.com/MbenkDroid/Blogger/84e08fa9/pagination.js'/> </b:if> Lalu copy instruksi CSS di bawah ini dan letakan instruksi tersebut di atas instruksi </style> pada template sobat.
/* Page Navigation with Number */ #blog-pager {clear:both; width:auto; line-height:17px; position:relative; display:block; text-align:left; overflow:visible; margin:0px; padding:0px} .showpage a, .showpageNum a, .showpagePoint {position:relative; background:#2f303f; display:inline-block; font-size:13px; color:#fff; margin:0 4px 0 0;padding:7px 13px; text-decoration:none; border-radius:3px; transition:all .3s} .showpageOf {float:right; color:#666; display:inline-block; font-size:13px; margin:0; padding:7px 0;} .showpageNum a:before{ content:''; position:absolute; top:0; bottom:0; left:0; right:0; box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02); transition:box-shadow 0.5s} .showpage a:hover, .showpageNum a:hover {background:#D8261C; color:#fff; position:relative} .showpagePoint, .showpagePoint:hover {background:#D8261C; color:#fff} span.label-info a.label-block:nth-child(n+2) {display:none} PERHATIAN : Bila di template sahabat sudah ada yang nama nya instruksi CSS ibarat instruksi CSS di atas harap di hapus terlebih dahulu. Dan bilamana di template sahabat sudah ada instruksi JavaScript ibarat di atas atau model semacam nya silahkan di hapus juga. Agar tidak terjadi bentrok dengan instruksi di atas.
Tapi bilamana di template sahabat sama sekali tidak ada yang sudah aku sebut kan di atas, sahabat dapat pribadi menerapkan nya.
Bagaimana berdasarkan sobat, gampang dan simple bukan! Untuk demo sahabat dapat lihat pada Navigasi halaman model nomer pada blog ini ( kalo belum berubah ). Atau pada gambar cover di atas.
Mungkin itu saja yang dapat aku bagikan pada kesempatan kali ini. biar artikel ini dapat bermanfaat buat sahabat yang sedang mencari Cara Membuat Navigasi Halaman Yang Simple Model Nomer Di Blog. Selamat mencoba!
