Cara Menambahkan Script Page Navigation di Blogspot

Navigasi halaman blog hampir ada pada setiap theme. Termasuk juga template blogspot yang digunakan blog ini. Sebagaimana terlihat di atas bottom bar, yang terdiri atas: Artikel Populer, Tema Artikel dan Tentang Blog. Pada bagian atasnya terlihat ada nomor 1, 2, 3...... 38, Next >>, Last. Dan ketika kita klik nomor-nomor itu akan ada reaksi. Yaitu berupa tampilan halaman lain dari blog yang sama yang disajikan di depan layar tepat di beranda blog yang sedang anda baca.

Widget itulah yang disebut dengan "navigasi halaman bernomor".

Bagi seseorang yang sedang membuat template blogspot sendiri dari nol. Tentu ingin kan mempunyai theme yang memiliki kemampuan seperti itu? Nah, belajar komputer otodidak tidak harus mengetik sendiri baris demi baris. Jika ini jalur yang ditempuh pasti akan lama karena harus menguasai banyak hal. Bahkan tidak hanya bahasa script HTML, CSS dan Javascript. Melainkan juga kemampuan tracing jika ada error yang terjadi. Dan kemampuan mengetik 10 jari agar pekerjaan ini tidak terasa melelahkan.

Adapun cara membuat template sendiri secara mudah tinggal copas saja. Iya, ada banyak script yang bertebaran di dunia maya. Termasuk yang sedang kita bicarakan ini; script page navigation. Jadi, kita ambil acak untuk dirangkai seperti sebuah puzzle agar lebih menarik. Tentu saja nanti hasil template tiap orang akan berbeda-beda meskipun ada kemiripan. 

Cara Menambahkan Script Page Navigation di Blogger

Berikut ini salah satu contoh script yang bisa diambil untuk menghiasi template. Script ini biasa disebut dengan numbered page navigation. Saya sertakan 4 model script navigasi halaman bernomor yang diambil dari beberapa sumber. Mudah-mudahan salah satunya ada yang cocok di hati.

1. Copy kode di bawah ini dan paste pada program text editor kesukaan Anda.

<b:if cond='data:blog.isMobile == "false"'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <!-- Script Page Navigation --> <script> /*<![CDATA[*/ var perPage=5; var numPages=6; var firstText ='First'; var lastText ='Last'; var prevText ='« Previous'; var nextText ='Next »'; var urlactivepage=location.href; var home_page="/"; /*]]>*/ </script> <script> //<![CDATA[ if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+=' ... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='...'}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress} //]]> </script> </b:if> </b:if> </b:if> <!-- Script Page Navigation End -->

2. Cari baris kalimat seperti terlihat contoh di bawah ini:

var perPage=5;

var numPages=6;

var firstText ='First';

var lastText ='Last';

var prevText ='« Previous';

var nextText ='Next »';

var urlactivepage=location.href;

var home_page="/";

3. Edit pada baris tersebut sesuai selera dimana "perPage=" menunjukan banyaknya artikel yang tampil per halaman, misalnya isi dengan angka 6, 7, 8. Sedangkan numPages menunjukan banyaknya lembar halaman yang angkanya terlihat di beranda.

4. Kemudian copy lagi kode tersebut dan login ke dashboard Blogger > Tema > Sesuaikan > Edit HTML.

5. Paste script tersebut di tempat sebelum </body>.

6. Kemudian pilih salah satu script model navigasi halaman di bawah ini: 

Model ke-1 

#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;}

Model ke-2

#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);}

Model ke-3

.displaypageNum a,.showpage a,.pagecurrent { padding: 8px 10px; margin-right: 3px; color: $(readmore.color); background-color: $(readmore.background.color); border: 1px solid $(readmore.border.color); display: inline-block; border-radius: 3px; } .displaypageNum a:hover,.showpage a:hover, .pagecurrent { border: 1px solid $(readmore.hover.color); color: $(readmore.hover.color) } .showpageOf { display:none !important; } #blog-pager .pages { border:none; }

Model ke-4

.displaypageNum a,.showpage a,.pagecurrent { padding: 8px 10px; margin-right: 3px; color: $(readmore.color); background-color: $(readmore.background.color); border: 1px solid $(readmore.border.color); display: inline-block; border-radius: 3px; } .displaypageNum a:hover,.showpage a:hover, .pagecurrent { border: 1px solid $(readmore.hover.color); color: $(readmore.hover.color) } .showpageOf { display:none !important; } #blog-pager .pages { border:none; }

6. Setelah memilih salah satu model script di atas. Silahkan tempatkan di atas tag ]]></b:skin>.

7. Klik Simpan.

Kesimpulan

Template buatan sendiri semakin hari semakin banyak perubahan. Dengan ini kita semakin semangat belajar cara membuat template blog sendiri.  Dan alhamdulillah, semua script di atas sudah saya terapkan dan semuanya berhasil.

Selamat mencoba.

Baca Juga