Topics

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


Add Layout — Blogger Sections & Widgets with AMP

Add Layout — Blogger Sections & Widgets with AMP
In this post we will guide you on the basic techniques to create a new layout section on Blogger template. This will help you add, edit, update or remove Blogger widgets while still using Blogger's existing dashboard functionalities.

We will also determine on what attributes or name convention that can be used either for a Blogger template or when using AMP HTML web page format.

Blogger AMP HTML Guide 2017


If you have not yet setup a clean Blogger template with AMP components, we have the full tutorial guide here http://blogr-amp.blogspot.com/2016/11/getting-started-create-your-1st-amp.html . We will start our guide from where we have left off at previous tutorial.

Add New Blogger Section

The purpose of this exercise is to create additional sections to include new widgets for your blog layout. We will add a section to add widgets for navigation links & sections to add widgets at sidebar & footer.

At your template HTML, find the <header> tag & copy and paste below codes after/below the id='header' section.

<b:section class='navbar' id='navbar' showaddelement='yes'/>

When added, it should look like below.

guide add navigation links at Blogger template with AMP

Locate your <aside> tag in template & add below Blogger section for the sidebar.

<b:section class='sidebar' id='sidebar' showaddelement='yes'/>

The results will look like so:-

tutorial add sidebar for Blogger template with AMP

Now locate your <footer> template element & copy and paste below Blogger section inside the <footer> ... </footer> HTML tag.

<b:section class='footer' id='footer' showaddelement='yes'/>
<b:section class='footer' id='footer2' showaddelement='yes'/>
<b:section class='footer' id='footer3' showaddelement='yes'/>
<b:section class='footer' id='footer4' showaddelement='yes'/>

Depending on how many columns you want to display on larger screen sizes, the above sections (as shown in previous screenshot) will be adding 4 footer sections since that we want to create a 4 column footer layout.

Save your template.

Always remember the section id has to be unique or error will occur when saving your template changes. Use a recognizable class names to easily target style which will be explained further in this tutorial series.

Can Blogger sections placed i n other parts of the HTML page?

The answer is no. Blogger sections must be used/included anywhere within the <body>...</body> tag of a Blogger template. We will detail out  & further explain in our next tutorial - Style & Presentation for Blogger AMP Pages

Add New Widgets

When you have saved your new sections at template HTML, go to your Blogger dashboard & your new sections will be available. You can easily recognize the new sections as it would be empty, with a plus sign to add widgets. The new section names will also display according to the id's of the mark-ups that you have entered previously.

Now at navbar section add a LinkList widget. Inside the new LinkList widget add some sample link name and link URL & save each new link you have created.

At the new sidebar & footer, add some more widgets like Labels widget, Popular Posts widget, another LinkList widget, or Javascript/HTML widget. All depends on you. Select the widgets and save your settings at the section you require it to display.

Remember not all widgets are available as when using AMP powered HTML, we have already disabled Blogger widgets functionality which uses javascripts.

When adding widgets, Blogger + AMP HTML fundamentals must be applied. Which means in later, you are required to remove all <b:include name='quickedit'/> Blogger tags that comes with a new widget install.

Use template code search like explained in the Get Started - Blogger + AMP Pages tutorial.

Preview Your Changes

I know, your blog pages looks plain & ugly :( . The best part is yet to come. In the next tutorial, you will learn how to easily style your blog pages with a mobile 1st approach - yes your blog will look awesome in any screen sizes!

Further reading on Blogger section, widgets, attributes can be found at the official Blogger Help Center page. Here all technical aspects of Blogger template elements, variables & fundamentals is explained for your further understanding.

Up Next: Style & Presentation - Mobile 1st Approach

Previous: Gettings Started - Create your 1st Blogger AMP Template

Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsStep-by-step guide how to create new layout sections for Blogger template with Accelerated Mobile Pages HTML in consideration, prevents unwanted usages of attributes, cleaner template mark-ups, recognizable attributes naming convention and preparation before adding style & presentation using the mobile 1st design approach. Easy to access references which will allow to further enhance Blogger pages layout/designs & future enhancements.Blogr-AMP: Add Layout — Blogger Sections & Widgets with AMP
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support In this post we will guide you on the basic techniques to create a new layout section on Blogger template. This will help you add, edit, upd....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...

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.


Working...

Ooops! We're having trouble connecting...