Theme Documentation (Version 2-0-0)

Thank you for choosing Blogr.AMP Blogger template with Accelerated Mobile Pages AMP HTML features pre-installed. This page covers detail instruction to further customize & setup your Blogr.AMP theme to your preference.

You can find out more about this theme at theme frequently asked question page.

Please check your Blogr-AMP theme version.

This Blogr-AMP theme documentation is for Version 2-0-0. Users using Blogr-AMP theme version 1-0-0 and below, please forward to Version 1-0-0 documentation. Thank you.

Theme Installation

Install Blogger Template

This section covers basic Blogger template installation & settings user might consider to further prepare to optimize blog.

Create Blog

At Blogger dashboard click New Blog > on window screen > add blog Title > add/check blog url availability > select default Simple blog template > click Create Blog!

AMP HTML Blogger Template Choose Default Theme

Setup Optimization Blog Settings

Turn off Blogger Mobile Template

This blog template setup uses Accelerated Mobile Pages AMP HTML features, it is required to turn off Blogger's Mobile Template.

AMP HTML Blogger Template Disable Mobile Template Howto

AMP HTML Blogger Template Deactivate Mobile Template settings

Enable Meta Description

Enable blog pages & post meta description by adding text not more than 160 characters.

AMP HTML Blogger Template enable site wide meta description

AMP HTML Blogger Template how to add meta description

Allow blog feed to full

By allowing blog feed to full will display Featured section accurately.

AMP HTML Blogger Template Featured section blog feed

Create Sample Posts

Upload sample posts.

Upload Template HTML

Find downloaded theme files, unzipped, continue to folder .../Upload/Template/ & open the template files with your favorite text editor. Select all and copy the contents in this file.

At Blogger Dashboard > Template HTML > select All existing template codes (Ctrl+A for Windows) and paste the copied template codes. Click Save Template.

Layout - Theme Dashboard

Theme custom dashboard layout with pre-installed Blogger widgets. Each section has indicators for customizing references which will help theme setup easily.

Add, remove, re-arrange or customize Blogger widgets accordingly.

No 3rd party apps required, you in full control.

Compatible with published posts and theme changes. No post preparation & edits required.

Writing & publishing new blog posts has no changes. Upload image, video, align text as normally would.

Always a good practice to assign blog posts with several related Labels & add text to further describe the posts at Search Description section located at post editor right sidebar.

Layout and Widgets

Slide Out Sidebar

Views:

Customization for slide out sidebar to enable view in dashboard & edit/update Blogger widgets pre-installed within this section.

Add, remove & arrange Blogger widgets accordingly.
Strict AMP tags & components required.
Javascripts not allowed.
Adding additional Blogger widgets requires to remove <b:include name="quick-edit"/>.
Reference: <amp-sidebar/>

add amp-sidebar on Blogger Templates with AMP HTML

Customizing Assigned Blogger Widgets

Click Edit the assigned widgets.

At Label widget select label to display or tick at All labels to automatically display all available label attached to blog posts.

At HTML/Javascript widget, add links or text in widget body.

Use AMP image components for images & no javascript allowed. Below is an example used on an HTML/Javascript widget to create links.

`<amp-sidebar>` positioning

amp-sidebar can be positioned sliding out from left or right of screen. By default, the amp-sidebar is sliding out from right of screen.

To change/update amp-sidebar to slide form left of screen, at amp-sidebar element, update/change its attribute side='...' & replace right with left. Save Template & preview changes. Below is an example to slide from left.

<amp-sidebar id='offcanvas' layout='nodisplay' side='left'>

`<amp-sidebar>` Title

var='ampsidebarTitle'

In Theme > Edit HTML update the attribute value at the above variable.

Header

Views:

Header Logo/Title

Change text & upload image as blog logo.

Main Navigation

Views:

Add text and URL to link to pages

Main Section (Blog Post Gadget)

Views:

Update the amount of posts to display on index pages.

Enable/Disable Quick Edit Tools

Un-tick/un-select "Display Quick Edit Button" to enable or disable Google Web Page Test and AMP HTML validation web page tester.

Sidebar Section

Views:

Add, remove, re-arrange or edit Blogger widgets.
Javascripts allowed.
Not available in mobile views.

Plug-ins - Related Posts

Views:

Display n amount of related blog posts by label/categories in random order according to the post last assigned Label.

Add "disable" (without quotes) at widget title to disable widget.
Drag & drop widget to desired location in Layout.
Custom set attribute at Layout > find Related Post gadget > click Edit.
Refer variables below for customization.

<div id="related"></div>

Required element attribute with id to attach re-constructed posts.

Variables

random
Required value: true or false
Description: Set & display n amount of posts in random order if set to true.

max_results
Required value: integer
Description: The n amount of posts to display at related section.

heading
Required value: string
Description: The text to display as sectional heading. Accepts HTML characters. Leave empty to disable related post heading display.

container_id
Required value: string
Description: The DOM element reference by id to append retrieved posts.

title_chars
Required value: integer
Description: The n amount of character to display for post titles. If set to 0 post title is disabled.

summary_chars
Required value: integer
Description: The n amount of characters to display at post summary. If set to 0, post summary is disabled.

author
Required value: string
Description: Displays related posts author. Leave empty to disable.

tags
Required value: string
Description: Displays related posts last assigned Label. Leave empty to disable.

image_width
Required value: integer
Description: The image width/size in pixels to display at posts. Add null to remove image display.

image_height
Required value: integer
Description: The image height in pixels to display at posts. If image_width is set to null, this attribute will not be honored.

image_default
Required value: url/string
Description: Fully qualified image url to display default image if post images is not found.

layout
Required value: AMP specific
Description: AMP specific values used with amp-img tags. If image_width is set to null, this attribute will not be honored.

attribution
Required value: string
Description: Text rendered with image attribution attribute. If image_width is set to null, this attribute will not be honored.

Plug-ins - Comments

Views:

All available comments system pre-installed with theme & its custom settings.

Disqus Comments

Enable or disable comment widget by leaving widget title empty.
Drag & drop, re-arrange comment widget positions accordingly.
Create a free Disqus account & grab Disqus shortname that you have assigned. Add your Disqus shortname at Layout > find Disqus Comment widget > click Edit.

Google Plus Comments

Enable or disable comment widget by leaving widget title empty.
Drag & drop, re-arrange comment widget positions accordingly.
At Layout > find Google+ Comment widget > click Edit.

Facebook Comments

Enable or disable comment widget by leaving widget title empty.
Drag & drop, re-arrange comment widget positions accordingly.
At Layout > find Facebook Comment widget > click Edit. Add your Facebook App ID in widget Body then click Save.

Contact Form, Page & Settings

Views:

Requires Blogger contact form widget and custom contact form settings widget.

Enable Blogger contact form gadget by clicking Edit > then click Save to register widget to blog.

Custom set Blogger contact form alert at Layout > find Contact Form Settings widget > click Edit

var CONTACT = {
  'SendingMsg' : '<i class="fa fa-cog"></i> Processing...',
  'SentMsg' : '<i class="fa fa-check"></i> Thank you. Your message has been sent.',
  'NotSentMsg' : '<i class="fa fa-warning"></i> We\'re sorry. Message could not be sent, please try again later.',
  'InvalidEmailMsg' : '<i class="fa fa-warning"></i> Email address required.',
  'EmptyMessageMsg' : '<i class="fa fa-warning"></i> Message field cannot be empty.'
};

Variables

SendingMsg
Required value: string/HTML
Description: Text displayed when contact form button is clicked.

SendMsg
Required value: string/HTML
Description: Text displayed when successful submitted form.

NotSentMsg
Required value: string/HTML
Description: Text displayed when form cold not be submitted or error during form submission.

EmptyMessageMsg
Required value: string/HTML
Description: Text displayed when email field is not provided.

InvalidEmailMsg
Required value: string/HTML
Description: Text displayed when the form message is not provided.

Upon sample pages upload, a contact page is installed. Find page & edit/add text in page editor to display text at contact page.

This page also comes with a theme helper to render Blogger contact form. Below is the example theme helper.

<div id="theme-contact-page"></div>

If this contact form helper exists, it will display the contact form inside its div. This helper can be used at any blog Pages.

The contact form functionalities is handled by Blogger platform. All form submission will be sent to the email addresses registered to the blog.

Plug-ins - Featured Bottom

Views:

Displays a collection of published posts using amp-carousel component.

Display n amount of blog posts by recently published, by label/categories or in random order.
Add "disable" (without quotes) at widget title to disable widget.
Custom set featured posts attribute at Layout > find Featured Bottom widget > click Edit.
Refer variables setup below.

<div id="featured"></div>