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