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.
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.
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:-
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 sasaran 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 PagesAdd 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