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 teman sudah ada navigasi halaman? Bila tidak ada segerahlah untuk memasang navigasi halaman untuk melengkapi fitur dari template yang teman gunakan. Dan di bawah ini aku akan mencoba mengembangkan bagaimana cara memasang Navigasi Halaman Yang Simple Model Nomer Di Blog Sobat.
Tapi jika di template teman sudah ada mungkin model nya berbeda dari model yang navigasi halaman yang aku share ini dan teman ingin mencoba sesuatu yang gres atau mungkin untuk sebagai materi pembelajaran, teman dapat mengikuti tutorial di bawah ini.
Cara Membuat Navigasi Halaman Yang Simple Model Nomer Di Blog
Langkah pertama silahkan teman copy isyarat di bawah ini kemudian letakan isyarat tersebut di atas isyarat </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 isyarat CSS di bawah ini dan letakan isyarat tersebut di atas isyarat </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 teman sudah ada yang nama nya isyarat CSS menyerupai isyarat CSS di atas harap di hapus terlebih dahulu. Dan bilamana di template teman sudah ada isyarat JavaScript menyerupai di atas atau model semacam nya silahkan di hapus juga. Agar tidak terjadi bentrok dengan isyarat di atas.
Tapi bilamana di template teman sama sekali tidak ada yang sudah aku sebut kan di atas, teman dapat pribadi menerapkan nya.
Bagaimana berdasarkan sobat, gampang dan simple bukan! Untuk demo teman 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 teman yang sedang mencari Cara Membuat Navigasi Halaman Yang Simple Model Nomer Di Blog. Selamat mencoba!
