Tutorial Pemasangan Unlimited Page Navigation Pada Blog -Kawan..
Template Blogger, Sebagai Pertimbangan untuk pemilihan desain blog anda agar terlihat SEO di mata google ,dengan ini kami akan memberi sedikit sharing tentang Tutorial Pemasangan Unlimited Page Navigation Pada Blog, dengan artikel tersubut kita berharap agar apa yang akan diterapkan pada blogs kita lebih dinamis dan cepat. karna salah satu syarat agar blog kita ramai pengunjung adalah responsife dan Fast loading. mudah-mudahan isi postingan ini dapat anda pahamisebagai dasara pemilihan template yang baik.
Keunggulan dari Page Navigation ini adalah dapat memuat 10000 artikel lebih yang pada umumnya Page Navigation hanya dibatasi hingga 500 artikel saja dan alhasil artikel sebelumnya tidak dapat ditampilkan di halaman blog. Bagi sobat blogger yang kemarin sempat request berikut langkah-langkah Cara Memasang Unlimited Page Navigation di Blogger.
1. Login ke blogger > Buka Template > Salin kode di bawah ini sebelum </head>
Warna Terang
<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>
Warna Gelap
<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>
Edit kembali kode CSS di atas sesuai kebutuhan
2. Kemudian salin kode di bawah ini sebelum </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>
Ganti kode postperpage=7 dengan jumlah artikel yang akan ditampilkan di setiap halaman dan ganti angka 3 pada kode numshowpage=3 menjadi jumlah nomor yang ditampilkan di Page Navigation ini
3. Selanjutnya cari kode HTML post di bawah ini
<b:includable id='main' var='top'>
Kemudian geser mouse ke bawah dan temukan kode ini (kode ini diambil dari template standar blogger)
<!-- navigation -->
<b:include name='nextprev'/>
Ganti kode di atas (atau yang mirip tergantung template yang digunakan) dengan kode di bawah 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>
4. Simpan template dan lihat hasilnya.
source:www.arlinadzgn.com/2016/04/memasang-unlimited-page-navigation-di-blogger.html
lihat juga
Tutorial Pemasangan Unlimited Page Navigation Pada Blog
Demikianlah Artikel Tutorial Pemasangan Unlimited Page Navigation Pada Blog
Sahabat Blogger Tutorial Pemasangan Unlimited Page Navigation Pada Blog, mudah-mudahan artikel ini bisa memberi manfaat untuk anda semua. Untuk kritik dan saran mohon kiranya anda lampirkan di kolom komentar dibawah ini.sekian dan terima kasih.