Reisverslagen en camperverhalen

Afbeelding
Reisverslagen en CamperverhalenWe trokken met onze camper door Schotland, Ierland, Portugal, Spanje, Noorwegen, West-Balkan en Tsjechië. Net als slakken hebben we bij deze camperreizen onderweg ons huis bij ons.  Zo reizen we in rustige slakkengang door Europa en Amerika. 
Van al onze reizen, die we zo de afgelopen jaren maakten, hebben we onderweg in een blog de camperverhalen vastgelegd.  Eenmaal weer thuis hebben we die reisverslagen in deze site ondergebracht. 


Met behulp van de plaatjes hieronder kun je direct doorklikken naar een bepaald reisverhaal in Europa. De reizen naar Amerika staan hierboven onder de tab. De afzonderlijke berichten die we tijdens een reis hebben geplaatst zijn terug te vinden in het groene uitklapmenu rechts.
Ook maakten we een aantal kortere trips. De verslagen daarvan vind je terug in de zijbalk. 

Wilt u iets vragen of opmerken? U kunt ons altijd mailen en een berichtje in ons gastenboek vinden wij ook leuk. 
We zijn ook te vinden op Twitter en Facebook.   























hamburgermenu in contempo

https://almost-a-technocrat.blogspot.nl/2017/03/google-blogger-sidebar-all-pages.html


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.


Reacties

Veel gelezen berichten

IJsselmeer, Lemmer, Hindeloopen, Makkum

Reisverslagen en camperverhalen

IJsselmeer Elburg, Harderwijk, Kampen

Proefje met blockquote

ronde hoek in contempo