Membuat Unlimited Page Navigation Responsive di Blogger

Crepictdzgn akan berbagi tutorial bagaimana cara membuat Unlimited Page Navigation Responsive di Blogger. Umumnya widget ini terletak pada bagian bawah homepage atau dibagian bawah bagian posting blog pada homepage atau halaman utama sebuah Blog.

Kenapa disebut Unlimited Page Navigation, karena mampu memuat lebih dari 10000 halaman artikel, namun pada umumnya script hanya membatasi 500 artikel dan selebihnya tidak ditampilkan..Ya mungkin faktor efisiensi homepage atau secara SEO tentu berpengaruh.

Cara Memasang Unlimited Page Navigation di Blogger

1. Login ke blogger > Buka Template > Salin kode di bawah ini sebelum

</head>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

/* 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-family:'Arial', Helvetica,font-size:15px;color:rgba(0,0,0,.8);padding:5px 8px;margin:0 4px 0 0;border: 1px solid #F1F1F1;transition:all .3s}

.showpageOf{float:right;background:#FB9543;color:#fff;}

.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:#FB9543;color:#FFFFFF;position:relative; border: 1px solid #FB9543;}

.showpagePoint{background:#FB9543;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>

2. Kemudian salin kode di bawah ini sebelum </body>

<b:if cond='data:blog.pageType == "index"'>

/*<![CDATA[*/

var postperpage=6; // Ket: jumlah artikel yang ditampilkan

var numshowpage=3; // Jumlah nomer yang ditampilkan di Page Navigation

var upPageWord ='< Prev';

var downPageWord ='Next >';

var bspagenavi=location.href;

var home_page="/";

/*]]>*/

</script>

</b:if>

Ganti kode postperpage=6 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 seperti di bawah ini

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

Kemudian scroll mouse ke bawah lalu cari kode seperti dibawah ini ( kode ini adalah kode standart template blogger)

<b:include name='nextprev'/>

Ganti kode di atas ( atau yang mirip tergantung template yang digunakan ) dengan kode di bawah ini

<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'>

<b:include name='nextprev'/>

</b:if>

4. Simpan template dan lihat hasilnya.

Cara Memasang Unlimited Page Navigation Style 1#

Dalam memilih style yang ada dibawah ini Sobat cukup mengganti kode CSS-nya saja tanpa mengubah langkah langkah ke dua dan seterusnya, jadi hanya mengubah kode CSS saja !

1. Login ke Blogger >> Buka Tema > Edit HTML, Kemudian salin kode CSS di bawah ini sebelum </head>.

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

/* Page Navigation */

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

@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>

Cara Memasang Unlimited Page Navigation Style 2#

1. Login ke Blogger >> Buka Tema > Edit HTML, Kemudian salin kode CSS di bawah ini 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{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

@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>

Cara Memasang Unlimited Page Navigation Style 3#

1. Login ke Blogger >> Buka Tema > Edit HTML, Kemudian salin kode CSS di bawah ini 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{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #000; background-color:#fff;border:2px solid #ccc;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#222;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #ccc;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

@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>

Demikian tutorial tentang Cara Membuat Unlimited Page Navigation Responsive di Blogger. Jika ada masalah terkait tutorial saya diatas silahkan tulis pada kotak komentar di bagian bawah artikel blog ini, semoga bermanfaat.

Membuat Unlimited Page Navigation Responsive di Blogger

Share this