Thursday, February 22, 2018

Cara Membuat Tombol Next Page Unlimited

Pada artikel ini saya berkesempatan membagikan Cara Membuat Tombol Next Page
dengan mudah tanpa ribet.
fungsi nya sendiri ialah untuk membuat artikel selanjut pada blog anda seperti pernomoran pada next page yang di tampilkan sesuai jumlah artikel pada blog anda.





keunggulan dari script ini sendiri ialah dapat memuat ratusan sampai ribuan artikel pada blog 
anda bisa di bilang tanpa limit atau Unlimited Next Page, untuk langkah-langkah cara membuat nya silahkan anda baca langkah-langkah di bawah ini.
1. Login Ke Blogger > Buka Template > Edit HTML > Pastekan Code Di Bawah ini tepat di atas </head> atau &lt;!--<head/>--&gt;


Warna Terang 
<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 */
#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>


Warna Gelap
<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 */
#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>

 
2.  Salin Script Di Bawah Ini Terus   Pastekan Code Di Bawah ini tepat di atas </body>


<b:if cond='data:blog.pageType == &quot;index&quot;'>
<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/tikusgov/sitemap.js/7d6225e7/unlipage.js' type='text/javascript'/>
</b:if>




3. Selanjut nya silahkan kalian cari script bawah ini di edit HTML


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

Silahkan  Scroll  mouse ke bawah dan temukan kode di bawah  ini 

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

Silahkan Ganti kode di atas atau yang mirip tergantung template yang anda  gunakan dengan kode di bawah ini.


<b:if cond='data:blog.pageType == &quot;index&quot;'>
<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/tikusgov/sitemap.js/7d6225e7/unlipage.js' type='text/javascript'/>
</b:if>


4. Simpan Dan Silahkan Lihat Perbedaan Nya Pada Blog Anda.

Result Page Unlimited 

source: https://goo.gl/81v9zM

No comments:

Post a Comment