Cara Menciptakan Navigasi Halaman Yang Simple Model Nomer Di Blog
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 membuatkan bagaimana cara memasang Navigasi Halaman Yang Simple Model Nomer Di Blog Sobat.
Tapi jika 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 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 sahabat sudah ada yang nama nya isyarat CSS ibarat isyarat CSS di atas harap di hapus terlebih dahulu. Dan bilamana di template sahabat sudah ada isyarat JavaScript ibarat di atas atau model semacam nya silahkan di hapus juga. Agar tidak terjadi bentrok dengan isyarat di atas.
Tapi bilamana di template sahabat sama sekali tidak ada yang sudah aku sebut kan di atas, sahabat dapat eksklusif 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!
