Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.


Add AMP Sidebar on Blogger Template Tutorial with Navigation Links

Add AMP Sidebar on Blogger Template Tutorial with Navigation Links
Create accessible navigation links on mobile devices (small screen sizes) becomes easier with ready built components provided by Accelerated Mobile Pages AMP-js. Blogger blog owners can add additional links, buttons, additional menus which is hidden at first but revealed with a tap of a button.

add amp-sidebar with Blogger Template full tutorial 2017

The amp-sidebar Component

As described at AMP Project website the amp-sidebar is:-

Provides a way to display meta content Write your blog like you normally would for temporary access (navigation links, buttons, menus, etc.).The sidebar can be revealed by a button tap while the main content remains visually underneath - AMP Project amp-sidebar



Like any other amp-components, the dedicated amp-js files must be included too. Users can include any HTML elements. Below are restricted AMP componets that may not be applied with amp-sidebar:-

  • <amp-accordion>
  • <amp-img>
  • <amp-fit-text>
  • <amp-list>
  • <amp-live-list>
  • <amp-social-share>

How to Add amp-sidebar on Blogger Templates

In this tutorial, we will show you how to include amp-sidebar component in Blogger template, how to add HTML elements & later, how to add sections & widgets using Blogger built in functionalities.

This tutorial, we will be using our blank AMP powered Blogger template HTML with the mobile first approach design. This would be a good canvas to work with.

Here is the tutorial page with the HTML codes http://blogr-amp.blogspot.com/2016/11/getting-started-create-your-1st-amp.html .

In addition, here is the full tutorial page to add mobile first approach CSS style to your blog template with AMP components: http://blogr-amp.blogspot.com/2016/11/style-presentation-mobile-1st-blogger.html.

Add Required amp-sidebar Script

At Blogger template HTML, find </head> and add below amp-sidebar component script which is required.

<script async='async' custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"/>

Blogger AMP tutorial add amp-sidebar js components 2017

Save your template.

Place amp-sidebar HTML Element

Since that the amp-sidebar component has a specific place to be used in an HTML page, at template find <body> & copy paste below HTML mark-ups after/below the <body> tag.

<amp-sidebar id='offcanvas' layout='nodisplay'>
  <button class='buttons' on='tap:offcanvas.close'>Close</button>
  <div class="sidebar">
  <ul>
    <li><a href="{{link-url}}">{{link-title}}</a></li>
    <li><a href="{{link-url}}">{{link-title}}</a></li>
    <li><a href="{{link-url}}">{{link-title}}</a></li>
    <li><a href="{{link-url}}">{{link-title}}</a></li>
  </ul>
  </div>
</amp-sidebar>

Tutorial Blogge AMP pages add samp-sidebar with buttons 2017

Here we have assigned an attribute id of offcanvas which we will refer later at Blogger template </style> to style the display.

The attribute layout="nodisplay" is required to hide the amp-sidebar component.

We also added a close button with an attribute class of buttons which allow users to close the amp-sidebar when it is revealed. Change the text Close to any text you require.

Within amp-sidebar component, we added an un-ordered list to create the navigation links.

  • Change {{link-url}} to the URL to the page you want users to link to.
  • Change {{link-title}} to the title to display at the link.
  • Add more links by copying from <li> .... </li> element tag inside/within the </ul> element tag.

Add amp-sidebar Open Button

Anywhere in your Blogger template HTML, you can add below markup to display the button to open reveal the amp-sidebar. For brevity & using previous tutorial Blogger template layout, we will add the amp-sidebar open button at template <header> element tag.

<button class='buttons' on='tap:offcanvas.toggle'>Open</button>

Change the text Open to any text you desire.

In order for the button open & close to work with amp-sidebar component, the assigned attribute id given to the amp-sidebar is used to reference the button function event.

Add amp-sidebar Styles

At template HTML find the /*]]>*/ </style> tag & add below CSS. Since that we have assigned an attribute id of offcanvas, we will use this reference to help target & style amp-sidebar display.

/* amp-sidebar */
#offcanvas { 
  padding: 20px;
  background-color: #fff;
}
#offcanvas ul {
  padding-left:0;
  list-style: none;
}
#offcanvas li>a {
  display: block;
  padding: 8px 12px;
}

/* amp-sidebar buttons */
.buttons {
  padding:10px 15px;
  background-color: black;
  color: white;
}

tutorial blogger AMP pages add custom CSS amp-sidebar 2017

Here we have added some padding & background color for the amp-sidebar & styled the un-ordered list/links.

We also added some padding to the un-ordered links to make sure ample space between one link and the other when it is clicked or tapped on smaller screen sizes.

Save your Template.

Go to any of your blog pages & an Open button should display (in this case) at header section of your blog page. You can further style/locate your buttons to your preference.

Change amp-sidebar Position in Blog Pages

The amp-sidebar components also comes with a side attribute to set the position on a blog page. below is an example to set the am-sidebar to the right side of page.

<amp-sidebar id='offcanvas' layout='nodisplay' side='right'>
<!-- {{rest of the mark-up}} -->

Up Next

In the next post, we will enhance amp-sidebar to replace the manual added links and use Blogger sections & widgets instead.

This will make it easier for Blog users to maintain/update their links & makes it possible to automate links using Blogger existing pre-assigned widgets.

This technique is also used on this AMP powered blog theme. If you want to grab this theme, contact us here & quick start your AMP powered blog in no time!

No 3rd party software installs. No blog post editing required. No file hosting required.

Write your blog like you normally would! This Blogger AMP template also supports web page views, valid AMP pages, meta search engines, which will blast your posts in search engines.

Read users reviews & how quickly Blogger AMP powered pages indexed at prominent positions here at our Facebook fanpage https://www.facebook.com.irsahindesigns

Reference: https://www.ampproject.org/docs/reference/components/amp-sidebar

Blogr-AMP Blogger AMP HTML Template Rated 5/5 based on 98 reviews Easily add amp-sidebar with Blogger template use Accelerated Mobile Pages AMP components. Add navigation links, menu, buttons which is hidden on page view but revealed when the assigned button is clicked/tapped upon. Find what AMP components that has been restricted & how to style the amp-sidebar component to blend in with the current style used at Blogger templates. This tutorial also provide easy to use codes with screenshots for easy implementation on template. Blogr-AMP: Add AMP Sidebar on Blogger Template Tutorial with Navigation Links
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Create accessible navigation links on mobile devices (small screen sizes) becomes easier with ready built components provided by Accelerated....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Google+ Comments

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Contact Us