Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mengatasi Navigasi Halaman Blog Tidak Berjalan di Versi Mobile

Cara Mengatasi Navigasi Halaman Blog Tidak Berjalan di Versi Mobile
Setelah Beberapa hari lalu kami membagikan tutorial Cara Membuat Tombol Next Page dengan Angka di Blog, Ternyata tombol next nya tidak berfungsi normail saat di jalan kan di versi mobile alias bug/ tidak suport di versi mobile.
Nah kali ini kami akan membagikan cara untuk memperbaiki bug tersebut, cara ini juga bisa di gunakan pada template yang tidak menggunakan kode navigasi yang kami share sebelum nya, atau untuk template yang masih belum mengunakan navigasi nomor.


Oke langsung saja cara nya sangat mudah, silakan ikuti langkah-langkahnya dibawah ini.


Cara Mengatasi Navigasi Halaman Blog Tidak Berjalan di Versi Mobile

1. Login Blogger
2. Klik Menu Template/Tema => Edit HTML
3. Hapus Semua Kode Navigasi yang anda tambahkan sebelumnya ke template anda/ kode bawaan dari template bagi yang tidak menggunakan kode navigasi yang kami share sebelumnya
4. Cari Kode </style> tambahkan kode di bawah ini sebelum kode </style>

/* Post Navigation */
#blog-pager{position:relative;display:block;width:100%;margin:1px 1px 1px 0;text-align:center}
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager a:link,#blog-pager a:visited{color:#333;font-size:11px!important;padding:8px 12px;margin:1px;background:#fff;border:1px solid #e0e0e0}
#blog-pager a:hover{border: 1px solid #3bc5f7;}

/* NUMBERED PAGE NAVIGATION */
.displaypageNum a,.showpage a,.pagecurrent {
 padding: 8px 12px;
 margin-right: 2px;
    margin-left: 2px; 
 color:#333333; 
 background-color:#ffffff;
 border: 1px solid #dddddd;
 display: inline-block;
 border-radius: 3px;
 font-size:11px;
 font-weight:bold;
   }
.displaypageNum a:hover,.showpage a:hover, .pagecurrent {
 border: 1px solid #3bc5f7;
}
.showpageOf { 
 display:none !important;
}
#blog-pager .pages {
 border:none;
}

6. Cari kode name='nextprev' pastikan kode nya seperti gambar dibawah



7. Kemudian Cari Kode </body> kemudian tambahkan kode dibawah ini sebelum kode </body>

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<!-- JAVASCRIPT NAVIGASI HALAMAN BERNOMOR -->
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Prev';
    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;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>

8. Simpan Template

Nah itu tadi Cara Mengatasi Navigasi Halaman Blog Tidak Berjalan di Versi Mobile, gimana mudah kan? kalau ada kesulitan silakan di tanyakan di kolom komentar,

Selamat Mencoba. Semoga bermanfaat.

26 komentar untuk "Cara Mengatasi Navigasi Halaman Blog Tidak Berjalan di Versi Mobile"

  1. Mksh om infonya. Di lain wktu tak coba.e :)

    BalasHapus
  2. Bermanfaat sekali kak infonya. Blog aq sering problem jg di navigasi ny. Setelah praktekin dg cara ini navigasi ane lancar.. thanks

    BalasHapus
  3. Work bos
    semakin tertarik saya

    BalasHapus
  4. Kebetulan punya saya error, pas banget nih, langsung saya coba, thanks

    BalasHapus
  5. mantap gan , sangat membantu ,thanks

    BalasHapus
  6. bikin lemot di bloggernya ga mas ?

    BalasHapus
    Balasan
    1. gak mas kalau ini, ini cuma mengganti kode template bawaan yang tidak ada tomobol navigasi nomornya

      Hapus
    2. Bagaimana ya pak ciri2 kode navigasi halamnnya sebelumnya yang mau saya hapus karena tidak berfungsi? Mau dihapus tpi ga tau kode yg akan dihapusnya yg mana bntuknya

      Hapus
    3. Code nya kurang lebih sama gan kaya yang diatas

      Hapus
  7. thanks, gan... ntar saya coba di blog satunya :D

    BalasHapus
  8. Bisa di Coba Nih Gan, soalnya saya pernah ngaleminn Kayak gini

    BalasHapus
  9. mantap bro. makasih.
    ini hasilnya
    https://seni-musik-sma.blogspot.com/

    BalasHapus
  10. min cara ganti dari max-results=7 jadi max-results=24 gmn caranya ya ?

    BalasHapus
  11. Thank you .. work 100% .. tapi untuk menghilangkan "Frist" sama "Last" gimana yaaa mana yg harus dihapus?

    BalasHapus
  12. Wah bermanfaat gan ini soalnya punyaku juga eror di mobile entar ane coba dulu👍👍

    BalasHapus
  13. terima kasih sharing ilmunya gan....sangat berguna untuk dipraktekan di masboo.blogspot.com

    BalasHapus