Monday, April 24

Customize Arrow Navigation In Mobile Template Of Blogger

Customize Arrow Navigation In Mobile Template Of Blogger

Navigating through a website using the swiping arrows is really useful as user don't have to look around the page for the Newer or Older page links. I have seen some forums where user were asking for a way to customize these swiping arrow to match there blog design and surprisingly i found out a way to customize blogger swiping arrow navigation with simple CSS.


How To Customize Arrow Navigation?

Step 1: Go to Blogger>Theme>Edit HTML.

Step 2: Search for ]]>< using Ctrl+F.

Step 3: Add below codes just above ]]><
#arrow-container.swiping { background-color:#1E90FF;width:25%;border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;}
 Customization : Change blue background color hex value to change arrows background color.

How To Disable The Arrow-Slider ? 

It is possible to do that, by including javascript in your blogger html before </body> tag.

Step 1: Go to Theme tab in Blogger Dashboard and click the Edit HTML button.

Step 2: Now click once inside the Editor and then Press CTRL+F(Windows) or COMMAND+F(Mac),Search for </body> and add below code just before it. (and Save the theme).
<script>
window.onload = function () {
var orig = document.getElementById("main");
var clone = orig.cloneNode(true);
orig.parentNode.replaceChild(clone, orig);
 }
</script>