Membuat nomor halaman responsive di blog

Membuat nomor halaman responsive di blog

Nomor halaman yang bisa dipakai disemua perangkat pc,table ataupun hp, tanpa ada elemen yang hilang dari pandangan karena tidak responsive,seperti tampak digambar atas dilihat dari hp android.
Lihat contoh penampilannya disini
Sebelum melakukan perubahan template, ada baiknya backup dulu templatenya.. Berikut langkah-langkah untuk membuat nomor halaman responsive :

1. Copy script dibawah ini :
   <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> //<![CDATA[ var perPage=2; /*per halaman*/ var numPages=10; var firstText ='First'; var lastText ='Last'; var prevText ='« Previous'; var nextText ='Next »'; var urlactivepage=location.href; var home_page="/"; //]]> </script> <script type='text/javascript'> //<![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; //Iccsi was here, doing magic 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) { //Iccsi was here, doing magic 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> Pastekan di template (Edit html) diatas </body>
   Keterangan :
   var perPage=2; adalah jumlah artikel perhalaman, sesuaikan dengan dengan jumlah pada tata letak, Posting Blog, Jumlah posting di halaman utama.


2. Copy css dibawah ini :
   .displaypageNum a,.showpage a,.pagecurrent{ padding: 0 10px;margin-right:8px; color: #bbb; background-color:#111;box-shadow: 0px 5px 3px -1px #888; display:inline-block;line-height:30px;margin-top:10px;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent { background:#2670bf;text-decoration:none;color: #fff;} #blog-pager .showpage, #blog-pager { padding:5px 10px;font:normal 13px arial;text-align:center;color: #000;float:center;} .showpageOf{ display:none!important;overflow:hidden;} #blog-pager .pages{ margin:10px 0;border:none;box-shadow: 0px 5px 3px -1px #888;} Pastekan di template (Edit html) diatas]]></b:skin>


3. Untuk template yang isi artikelnya tidak ditampilkan di home, mungkin tertarik untuk mengkombinasikan nomor halaman javascript dan 3 tombol bawaan blog (Prev, Home, Next), yaitu nomor halaman yang baru kita buat akan tampil di home blog, sedangkan 3 tombol bawaan blog akan ditampilkan pada isi artikel, so silahkan Edit html, cari kode :
   <div class='blog-pager' id='blog-pager'>, biasanya ada dua, pilih yang kedua (biasanya dibawah <b:includable id='nextprev'>), setelah ketemu, sisipkan kode berikut dibawahnya :
   <b:if cond='data:blog.pageType == &quot;item&quot;'>, dan penutup </b:if> diatas </div>  diatasnya </b:includable>.
   Atau kalau mau pakai yg saya buat, silahkan hapus, mulai dari kode
   <div class="blog-pager" id="blog-pager"> s/d dengan </div> yang tersisa hanya : <b:includable dan penutupnya </b:includable>, sisipkan kode dibawah ini diantara  <b:includable dan </b:includable> :
   <div class='blog-pager' id='blog-pager'> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><!--data:newerPageTitle/--><img alt='Prev' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiju3eCHhtnXRpS8KuKHoaFp5FKkDX5ZkQxTedKe7_8B9UJTfnTBvxAlaYhxve2tNw3TNd0vhQzQFjLCSjYdCCcGw1_X_87tZyx2R-iv2axi2kDopAJTkVdOTIgiwVL7GlMZvP2hK_8cJrL/s1600/prev30.png' title='Produk tanggal lebih muda' with='auto'/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><!--data:olderPageTitle/--> <img alt='next' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6sPD2eYJN2VWL7ekRcOpW0f7RQSDYBPVWYsmf-HlmP3mvvpnakzoyj9TQP6W5U7SbuwYRibmIlpYiWkt9panqWlOvG4_Y6QMSsxiaw0gkszql_HAvLnn75CTNgGNC0UQ4XnBV_8arGDdO/s1600/next30.png' title='Produk tanggal lebih tua' with='auto'/></a> </span> </b:if> <a class='home-link' expr:href='data:blog.homepageUrl'><!--data:homeMsg/--><img alt='Home' height='46' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMBwbfkwXNVZ9F0W8r8NMxck7ByaVGEFdUvzuTPI1EDMtbsehUk536QXgC9ZmpKkqJm-Vw44H1B2sK1a9d1dV17zOOK-n16CBAXcKRUvW4vT12ffBLP8EyLRGoaH7nKj0EPDCwgrXv1K7N/s1600/home40tbl.png' title='Home' with='auto'/></a> <b:if cond='data:mobileLinkUrl'> <div class='blog-mobile-link'> <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a> </div> </b:if> </b:if> </div> <div class='clear'/>