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

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