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"/>
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>
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;
}
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 enhanceamp-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
Working to get connected...
Ooops! We're having trouble connecting. Please refresh your page or contact us...