Blogger: Disable Arrow Slider in Mobile Mode

Step by step how to disable arrow slider gestures of blogger website on mobile phone.
Normally, user can  go to next/previous post by swiping left or right on mobile like this

It looks good in concept. But in reality,  when users want to scroll the page, rarely users swipe page in 100% vertical direction because the hand is not accurate like a computer.  Mostly users will mixed up with horizontal direction when scrolling.

So, this function is very annoying because user can mistakenly go to next/previous post instead of scrolling page.

Fortunately, I found out how to disable it and want to share to you here.

1Click on 'Template' -> 'Edit HTML'

2Click anywhere in code pane, and hit 'Ctrl' + 'F' to open search box.

3Type </body> in search box and hit enter.

4Place this code before </body> tag.

<script>
  //<![CDATA[
  var mainSection = document.getElementById("main");
  var args = [];
  var orginalAddEvent = mainSection.addEventListener;

  mainSection.addEventListener = function() {
   args[args.length] = arguments[0];
   args[args.length] = arguments[1];

   if(arguments[0] != 'touchstart' && arguments[0] != 'touchmove' && arguments[0] != 'touchend')
  orginalAddEvent.apply(this, arguments);
  };
  //]]>
</script>

Result will be like this

5Save your code and try running in your website on mobile phone. You will see that arrow slider is not displayed anymore when swiping left/right.



Happy Coding!