Cara Menciptakan Unlimited Page Navigation Di Blogger

Cara Membuat Unlimited Page Navigation di Blogger - Pada kesempatan sore ini Mas Design akan memperlihatkan tutorial tentang  Cara Membuat Unlimited Page Navigation di Blogger. Page Navigation ini memiliki fitur penomoran, sebelum dan selanjutnya sehingga pengunjung blog kita sanggup mengakses halaman selanjutnya maupun halaman tertentu yang di tandai dengan penomoran halaman.


Unlimited Page Navigation ini memiliki fitur memuat 10000 artikel yang pada umumnya page navigation hanya berfugsi menampilkan 500 artikel. Tidak sedikit para blogger memakai Unlimited Page Navigation ini, dikarenakan page navigation ini selain memiliki fitur sanggup memuat 10ribu artikel, unlimited page navigation ini juga sangat dinamis untuk di pasang di blog sobat, jadi saya sarankan semoga teman juga memasang unlimited page navigation ini di blog sobat. :)

Cara Membuat Unlimited Page Navigation di Blogger

1. Login ke Blogger > Template > Edit Html > Pilih salah satu Kode CSS di bawah > Kemudian simpan sebelum Kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <style type='text/css'> /* Page Navigation V-Terang */ #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 != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <style type='text/css'> /* Page Navigation V-Gelap */ #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><>

Pilih salah satu arahan CSS di atas.
Silahkan lakukan modifikasi pada arahan CSS diatas sesuai selera sobat.

2. Langkah selanjutnya simpan arahan JS di bawah ini sebelum arahan </body>

<b:if cond='data:blog.pageType == &quot;index&quot;'> <script type='text/javascript'> /*<![CDATA[*/ var postperpage=5;var numshowpage=3;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/"; /*]]>*/ </script> <script src='https://cdn.rawgit.com/zaiv/MasDzgn-html/master/u.p.nav.js' type='text/javascript'/> </b:if>

Ganti arahan postperpage=5 dengan jumlah artikel yang akan ditampilkan di setiap halaman dan ganti angka 3 pada arahan numshowpage=3 menjadi jumlah nomor yang ditampilkan di Page Navigation ini

3. Selanjutnya cari Kode HTML post dibawah ini

<b:includable id='main' var='top'>

Kemudian scroll mouse ke bawah dan temukan arahan dibawah ini:

<!-- navigation -->     <b:include name='nextprev'/>

Ganti arahan diatas (atau yang seolah-olah sesuai template yang teman gunakan) dengan arahan dibawah ini :

<!-- navigation -->     <b:if cond='data:blog.pageType == &quot;index&quot;'>         <b:include name='nextprev'/>     <b:else/>     <b:if cond='data:blog.pageType == &quot;archive&quot;'>         <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>


4. Simpan hasil Edit Template teman dan lihat hasilnya.

Demikian Tutorial wacana Cara Membuat Unlimited Page Navigation di Blogger pada sore ini, Semoga Bermanfaat.

Source : https://info.materialapk.com/search?q=memasang-unlimited-page-navigation-di-blogger

Share this post