Cara Memasang Unlimited Page Navigation Di Blog
Cara Memasang Unlimited Page Navigation di Blog - Jika kau sering browsingan, tentu kau tak asling lagi dengan nomor halaman yang biasa ada dibawah artikel - artikel. Misalnya dalam sebuah blog yang kau kunjungi, kau akan menuju ke halaman kedua. Dan disitulah kau menemukan page navigation, alias navigasi halaman.
Navigasi halaman sendiri sanggup memakai penomoran. Mulai dari angka satu sampai seterusnya. Nah, dalam kesempatan kali ini Admin akan mengembangkan navigasi halaman yang sanggup kau atur jumlah artikelnya setiap halaman. Bisa 7, 8, atau seterusnya.
Nah, tutorial ini Admin jumpai dikala secara sengaja browsing untuk memperbaiki problem navigasi halaman pada situs ini.
Dan kebetulan juga situs Arlina Design memposting cara memasang page navigation di blog. Admin lihat saja deh artikelnya.
Dan isinya yaitu menyerupai yang akan Admin jelaskan dibawah ini.
Makara berikut yaitu tutorial memasang page navigation di blog dengan tumpuan dari situs Arlina Design :
1. Buka blogger.com
2. Pilih Tema atau Template
3. Cadangkan terlebih dahulu template blogmu
4. Klik edit HTML
5. Copas instruksi berikut sebelum </head>
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <style type='text/css'> /* Page Navigation */ #blog-pager{background:#fff;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0} .showpage a,.showpageNum a,.showpagePoint,.showpageOf{position:relative;background:#fff;display:inline-block;font-size:13px;color:rgba(0,0,0,.8);padding:5px 8px;margin:0 4px 0 0;box-shadow:0 1px 4px 1px rgba(0,0,0,0.1);border-radius:2px;transition:all .3s} .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,.showpagePoint:hover{background:rgba(0,0,0,0.03);color:#333;position:relative;} .showpagePoint{background:#2980b9;color:#fff;} @media screen and (max-width:640px) { #blog-pager {padding:12px;} .showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0;box-shadow:0 1px 2px 1px rgba(0,0,0,0.1);}} @media screen and (max-width:320px) { .showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}} </style> </b:if> </b:if> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <style type='text/css'> /* Page Navigation */ #blog-pager{background:#2d3141;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0} .showpage a,.showpageNum a,.showpagePoint,.showpageOf{background:rgba(255,255,255,.1);display:inline-block;font-size:13px;color:rgba(255,255,255,.8);padding:5px 10px;margin:0 2px 0 0;border-radius:2px;transition:all .3s} .showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.2);color:#fff;position:relative;} .showpagePoint{background:#70c3eb;color:#fff;z-index:200;position:relative;} @media screen and (max-width:640px) { #blog-pager {padding:12px;} .showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0}} @media screen and (max-width:320px) { .showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}} </style> </b:if> </b:if> 6. Copas instruksi berikut sebelum instruksi </body>
<b:if cond='data:blog.pageType == "index"'> <script type='text/javascript'> /*<![CDATA[*/ var postperpage=7;var numshowpage=3;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/"; /*]]>*/ </script> <script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/unlipage.js' type='text/javascript'/> </b:if> 7.Cari instruksi berikut
<b:includable id="main" var="top">
8.Scroll kebawah sampai kau menemukan instruksi berikut ini :
<!-- navigation -->
<b:include name="nextprev">
9.Ganti instruksi tersebut dengan instruksi berikut ini :
<!-- navigation --> <b:if cond='data:blog.pageType == "index"'> <b:include name='nextprev'/> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <b:include name='nextprev'/> <b:else/> <b:if cond='data:blog.homepageUrl != data:blog.url'> <!-- navigation --> <b:include name='nextprev'/> </b:if> </b:if> </b:if> 10. Simpan template
Untuk penampakan hasilnya, sanggup kau lihat si gambar cover artikel ini
Ganti angka pada postperpage=7 sesuai harapan untuk menampilkan berapa pos dalam satu halaman dan numshowpage =3 dengan jumlah halaman yang akan ditampilkan pada page navigation ini.
Referensi Arlina Design
