Google Ads

How to make sure the new Google Blogger theme sidebar menu button to stay on all types of pages

The hamburger menu button on the new Google Blogger themes
The hamburger menu button on the new Google Blogger themes

The hamburger menu button does not appear on all types of pages. It will only appear on index type pages (homepage, search result pages, label pages) and when you are in post pages, the hamburger menu button will appear as back button in the form of an arrow pointing left.




Hooray! and finally Google Blogger team had added four (Contempo, Soho, Emporio and Notable) new Blogger themes (previously known as template) into their existing set of themes. Currently I am settled with Contempo theme. One of their nice features about these 4 new themes is their hidden sidebar that can be open using the three horizontal lines button (known as hamburger menu button in the template code). You can add widgets of your liking into the sidebar from the Layout tab. I find it useful as a neat hidden vertical navigation bar feature for mobile devices where it has small screen. It does gives a user experience of neatness or de-cluttered blog that focuses on delivering your content.

Sidebar menu when the hamburger menu button is pressed
Sidebar menu when the hamburger menu button is pressed

However, this hamburger menu button does not appear on all types of pages. It will only appear on index type pages (homepage, search result pages, label pages) and when you are in post pages, the hamburger menu button will appear as back button in the form of an arrow pointing left. Another irony of this button is it gives the user an assumption that it is a back button that brings you to the previous page that you have navigated from. Well, the assumption is wrong! The back button is actually just a homepage button "jeng jeng jeng!!!!".

The hamburger menu button is replace with back button when in post pages type
The hamburger menu button is replace with back button when in post pages type

My opinion is that why do I need a homepage button that looks like a back button to confuse my user. I can always put a home link in the sidebar itself and intuitively, user will always use their browser back button to go back to previous page be it that they are using a desktop, tablets or a smart phone.

Okay let's stop all this ranting and do something about it which I did. What I found out is that it's a minor tweak at the template code and it was easy too. This is how I did it:

Step 1: Look for this set of code in your theme template codes.

For Contempo theme:

<b:if cond='data:view.isSingleItem'>
  <a class='return_link' expr:href='data:blog.homepageUrl'>
    <b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
  </a>
<b:else/>
  <b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
</b:if >

For Soho theme:

<b:if cond='data:view.isPost'>
  <div class='back-button-container'>
   <a expr:href='data:blog.homepageUrl'>
   <b:include data='{ iconClass: &quot;touch-icon back-button rtl-reversible-icon&quot; }' name='backArrowIcon'/>
   </a>
  </div>
<b:else/>
 <div class='hamburger-menu-container'>
   <b:include data='{ iconClass: &quot;touch-icon hamburger-menu&quot; }' name='menuIcon'/>
 </div>
</b:if>

Step 2: Comment out the original code just in case you might want it back. The comment syntax is highlighted in yellow.

For Contempo theme:

<!-- b:if cond='data:view.isSingleItem'>
  <a class='return_link' expr:href='data:blog.homepageUrl'>
    <b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
  </a>
<b:else/>
  <b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
</b:if -->

For Soho theme:

<!--b:if cond='data:view.isPost'>
  <div class='back-button-container'>
    <a expr:href='data:blog.homepageUrl'>
      <b:include data='{ iconClass: &quot;touch-icon back-button rtl-reversible-icon&quot; }' name='backArrowIcon'/>
    </a>
  </div>
<b:else/>
  <div class='hamburger-menu-container'>
    <b:include data='{ iconClass: &quot;touch-icon hamburger-menu&quot; }' name='menuIcon'/>
  </div>
</b:if-->

Step 3: Copy and paste this code just after the commented code block.

For Contempo theme:

<b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>

For Soho theme:

<div class='hamburger-menu-container'>
   <b:include data='{ iconClass: &quot;touch-icon hamburger-menu&quot; }' name='menuIcon'/>
</div>

Step 4: Save your theme template.


You might notice that the new code is actually the same line in the code block you have just commented. This is because for me its easier to track what I commented out and introduce a new code into the template.

The idea of this code change is to make sure the new Google Blogger theme sidebar hamburger menu button stays on all types of pages across the blog. Notice the if-else condition in the code you have just commented.

Update [9 Apr 2017] : Added the code change for Soho theme or template. Previously the code change is for Contempo theme.


Comments

  1. Hi..
    how add a sidebar under the header, and under the posts ??
    Please help me

    ReplyDelete
    Replies
    1. Hi. I am not sure what kind of layout you are referring to. Sidebar under the header and posts is not a sidebar to me.

      Delete
  2. The trick works, but the title of the blogg is a little boring. You could not go up again.

    ReplyDelete
  3. Hello! thank you so much for this. it works! :-)
    can you help me with this - How to add a sidebar in the Contempo theme ?

    thanks in advance.

    ReplyDelete
  4. Hi, can you do the same for the emporio theme? I tried the code, and yes the back button changes to a 3 line menu but when i click it, it doesn't show the widgets i have.

    ReplyDelete
  5. I tried this method with the emporio theme and yes the back button changes to the hamburger menu but when i tap on it but i only see a black layer that covers the screen. What am i doing wrong?
    Here's a test blog: http://testingnoside.blogspot.com
    IAwaiting for your quick reply.
    Cheers!

    ReplyDelete
  6. How to do for google Emporio theme??

    ReplyDelete
  7. how to remove back arrow from Emporio theme?this method isn't working for emporio theme!please help me?

    ReplyDelete
  8. Hi, is there any solution for full side bar viewing in all resolutions and not only <1440 pixels? Thank you.

    ReplyDelete
  9. hi, is there a way to add a side bar in soho theme?

    ReplyDelete
  10. Hi Boon, thanks for your help on this, I will definitely use it on my Soho theme blog! I do have one more frustration about the sidebar menu. Is there a way to replace the hamburger-icon by something else? I would really like to change it into a word like 'Menu' or 'About'. Have been searching for a solution for a long time now, but can't find it anywhere! I love that little sidebar and also like the neat and minimalist hamburger icon but in my experience it is often overlooked by many visitors (especially the older demographic).

    ReplyDelete
  11. Bang!!
    I'm using the Contempo template and this modification worked like charm :) Thank you so much!


    ReplyDelete
  12. How to add a menu bar and sub menu please help me

    ReplyDelete
  13. it works, thanks sir, how to change the font size in popular post in sidebar , it seems big enough for the title, my website is www.techsterb.com. thanks in advance sir.

    ReplyDelete
  14. You are awesome! This simple code fix works beautifully in the Contempo theme. What was Blogger thinking by leaving it out?

    ReplyDelete
  15. For contempo correction visit this page
    https://thetailon.blogspot.in/2018/02/customize-contempo.html

    ReplyDelete
  16. Hi, is there a way to REPLACE those three lines with another icon?

    ReplyDelete
  17. Hi
    How can apply contempo top-sidewar on travel theme

    ReplyDelete
  18. Than you sir, it is done for me. and it is great post. I have applied this to my blog.

    ReplyDelete
  19. great..exactly what I want.. done it thanks

    ReplyDelete
  20. Thank you, it took awhile to find the original code as there isn't a good search feature for it. However once I did, the adjustment worked a treat :)

    ReplyDelete
  21. I am trying to do something opposite - I would like my Notable sidebar to stay visible at all times and be sticky. I've been trying to accomplish it all day, but most coding suggestions are outdated :( or I get errors I can't figure out. This is my first day playing/working with HTML and I want to learn, but I really do need an advice please. I have an IT system admin background, but this is an entirely diffrent animal. Thank you, J

    ReplyDelete
  22. nice article and thanks for sharing

    ReplyDelete
  23. thank you SO MUCH for this! I found other solutions from others that didn't work. This one did exactly what I needed. Deeply appreciate <3

    ReplyDelete

Post a Comment

Thank you for visiting Almost a Technocrat. Due to many spam comments, your comment will be moderated.

Popular posts from this blog

A Better SKMEI 1358 Instructions Manual

A Better SKMEI 1418 / 1427 Instructions Manual

How to force stop or cancel Android download manager downloading process

SKMEI 1358 Review