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 SectionThe 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
<b:section class='navbar' id='navbar' showaddelement='yes'/>
When added, it should look like below.
<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
idhas to be unique or error will occur when saving your template changes. Use a recognizable
classnames 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 WidgetsWhen 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.
navbarsection 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
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 ChangesI 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