Cara Memasang Unlimited Page Navigation Responsive
Cara Memasang Unlimited Page Navigation Responsive - Page Navigation merupakan sebuah navigasi penomoran yang berfungsi untuk membukan halaman artikel selanjutnya dan juga untuk kembali kehalaman sebelumnya sesuai dengan jumlah artikel yang ada di Blog.
Berbicara navigasi, disini saya akan share navigasi penomoran yakni Unlimited Page Navigation. Keunggulan yang dimiliki navigasi ini ialah sanggup memuat 10.000 artikel lebih yang pada umunya hanya sanggup membuka 500 artikel dan artikel sebelumnya tidak sanggup di buka.
Untuk kau yang ingin memasang navigasi ini, kau sanggup mengikuti panduannya di bawah ini untuk memasang Unlimited Page Navigation di Blogger.
1. Login ke akun Blogger
2. Pilih Template, Edit HTML
3. Pemasangan pertama yakni pemasangan CSS, disini ada tiga pilihan warna pilih sesuai keinginan. Untuk pemasangannya kau cari aba-aba </head> dan pasangnkan diatasnya.
Warna Terang
Warna Lembut
Warna Gelap
4. Berikutnya, kau salin aba-aba dibbawah ini dan pasangkan di atas aba-aba </body>
Note : Ganti aba-aba postperpage=8 dengan jumlah artikel yang akan ditampilkan disetiap halaman dan ganti angka 4 pada numshowpage=4 untuk menampilkan nomor pada navigasi.
5. Tahap selajutnya pemasangan aba-aba HTML, untuk memudahkan pencarian gunakan CTRL+F, kemudian cari kode;
Note : Jika tidak menemukan menyerupai aba-aba diatas, kau cari aba-aba yang menyerupai mirip menyerupai aba-aba diatas.
Setelah ditemukan, kau ganti aba-aba diatas dengan aba-aba di bawah ini :
6. Simpan Template, dan kau lihat hasilnya.
Demikian tutorial cara memasang unlimited page navigation responsive, rujukan ini diambil dari Arlina Design. Terimakasih sudah berkunjung dan agar bermanfaat.
Berbicara navigasi, disini saya akan share navigasi penomoran yakni Unlimited Page Navigation. Keunggulan yang dimiliki navigasi ini ialah sanggup memuat 10.000 artikel lebih yang pada umunya hanya sanggup membuka 500 artikel dan artikel sebelumnya tidak sanggup di buka.
Untuk kau yang ingin memasang navigasi ini, kau sanggup mengikuti panduannya di bawah ini untuk memasang Unlimited Page Navigation di Blogger.
Unlimited Page Navigation di Blogger
1. Login ke akun Blogger
2. Pilih Template, Edit HTML
3. Pemasangan pertama yakni pemasangan CSS, disini ada tiga pilihan warna pilih sesuai keinginan. Untuk pemasangannya kau cari aba-aba </head> dan pasangnkan diatasnya.
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:#f23a09;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 Lembut
<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>
4. Berikutnya, kau salin aba-aba dibbawah ini dan pasangkan di atas aba-aba </body>
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=8;var numshowpage=4;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>
Note : Ganti aba-aba postperpage=8 dengan jumlah artikel yang akan ditampilkan disetiap halaman dan ganti angka 4 pada numshowpage=4 untuk menampilkan nomor pada navigasi.
5. Tahap selajutnya pemasangan aba-aba HTML, untuk memudahkan pencarian gunakan CTRL+F, kemudian cari kode;
<!-- navigation -->
<b:include name='nextprev'/>
Note : Jika tidak menemukan menyerupai aba-aba diatas, kau cari aba-aba yang menyerupai mirip menyerupai aba-aba diatas.
Setelah ditemukan, kau ganti aba-aba diatas dengan aba-aba 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>
6. Simpan Template, dan kau lihat hasilnya.
Demikian tutorial cara memasang unlimited page navigation responsive, rujukan ini diambil dari Arlina Design. Terimakasih sudah berkunjung dan agar bermanfaat.