Theme Documentation (Version 1-0-0 & Below)

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.

Please check your Blogr-AMP theme version.

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

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

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!

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.

Enable Meta Description

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

Allow blog feed to full

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

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

This section displays 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.

---

Layout - Customizations & Widgets

This section covers theme layout & usage of pre-assigned Blogger widgets installed with theme.

---

Header

Header Logo

Change text & upload image as blog logo.

Navigation

Add text and URL to link to pages

Homepage Featured

Click edit and custom set widget & post display

Offer Top (Web View)

Add HTML, links, text, click to action. Use AMP components (preferred). No javascripts (preferred). Remove widget javascript insert when new widgets added (preferred).

Main Blog

Update the amount of posts to display on index pages.

Sidebar (Web View)

Add, remove, re-arrange or edit Blogger widgets. Remove widget javascript insert when new widgets added.

Offer Bottom

Add HTML, links, text, click to action. Use AMP components required. No javascript.
Remove widget javascript insert when new widgets added within this section.

Featured Bottom

Enable featured section by adding <!-- --> at widget body & save widget. Custom set attributes at Template HTML. Details & custom setups can viewed under Plug-ins section.

To disable featured posts, remove/leave widget title empty & Save widget.

To update featured posts display, refer Plug-in section.

Footer (Web View)

Add HTML, links, text, click to action. Use AMP components. No javascript.
Remove widget javascript insert when new widgets added.

Slide Out Sidebar

This section covers customization for slide out navigation sidebar to enable view in dashboard & edit/update Blogger widgets.

---

To enable slide out sidebar at Blog dashboard for editing, go to Template HTML find <amp-sidebar> ...</amp-sidebar> and update the element tag to use a <div> & closing </div>. Refer image example below.

Update Mar 2017: Offcanvas sidebar is now available in Theme Layout. Add, remove & arrange Blogger widgets accordingly. Strict AMP tags & components required.

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'>

Plug-ins - Featured Bottom

This section covers theme add-on custom setup featured posts.

---

Featured Bottom

Display n amount of blog posts by recently published, by label/categories or in random order. Custom set attribute at Template HTML. Refer variables setup below.

---

Variables

---

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

---

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 featured section. If the required amount is less then retrieved, the total amount of posts retrieved is displayed.

---

max_feed
Required value: integer
Description: The total amount of posts to retrieve from Blogger servers.

---

label
Required value: string or null
Description: Retrieve posts by its Label. Capital case sensitive. Letter spacing is replaced with %20. If set to null, retrieved the current posts from feed.

---

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.

---

img_size
Required value: integer
Description: The image size to retrieve from Blogger servers in pixels.

---

img_width
Required value: integer
Description: The image width in pixels to display in amp-carousel.

---

img_height
Required value: integer
Description: The image height in pixels to display at posts.

---

img_layout
Required value: AMP specific
Description: AMP specific values used with amp-img tags.

---

carousel_delay
Required value: integer
Description: The amount in milliseconds each posts transition is delayed.

---

carousel_width
Required value: integer (mandatory)
Description: amp-carousel container width in pixels.

---

carousel_height
Required value: integer (mandatory)
Description: amp-carousel container height in pixels.

---

carousel_controls
Required value: controls (AMP specific)
Description: Display amp-carousel arrow controls.

---

carousel_responsive
Required value: responsive (AMP specific)
Description: Overrides amp-carousel width to expand 100% to its parent container width. Overrides amp-carousel height to proportionately re size to the amp-carousel width at a 4:3 ratio.

---

carousel_type
Required value: slides (AMP specific)
Description: Required to target children element to initiate within amp-carousel.

---

carousel_autoplay
Required value: autoplay (AMP specific)
Description: Required to target children element to initiate within amp-carousel.

---

Plug-ins - Related Posts

This section covers theme add-on features custom set related posts by label/categories.

---

Related Posts

Display n amount of blog posts by label/categories in random order or by date published. Custom set attribute at Template HTML. Refer variables setup below.

---

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.

---

container_id or 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: true or false
Description: Displays post author registered with blog posts.

---

author_by
Required value: string
Description: Text to display before author name.

---

image_size
Required value: integer
Description: The image size to retrieve from Blogger servers in pixel.

---

amp_width
Required value: integer
Description: The image width in pixels to display at posts.

---

amp_height
Required value: integer
Description: The image height in pixels to display at posts.

---

amp_layout
Required value: AMP specific
Description: AMP specific values used with amp-img tags.

---

amp_attribution
Required value: string
Description: Text rendered with image attribution attribute.

---

Plug-ins - Comments

This section covers theme comments system add-on features locating, enabling & customizing comments settings.

---

Comments System

Disqus

Create a free Disqus account & grab Disqus shortname that you have assigned. Add your Disqus shortname at Template HTML. Refer below for location.

Google Plus

In Template HTML, find google plus attribute at Blog1 widget > post-comments

Enable Google Plus comments by removing lines marked by red arrow below. Save Template.

Sitemap Page

This section covers dynamically generated sitemap page retrieved from blog feed.

---

Upon sample pages upload, a sitemap page is installed. Find page and edit/add text to display at sitemap page.

To display posts by assigned label, click HTML button & view in editor several elements with assigned attributes is provided. Below is an example:-

<div class="sitemap" data-headings="Getting Started Tutorials" data-label="Learn" data-results="9999"></div>

By assigning custom attribute values, to a DOM element, theme plug in will attempt to dynamically display the posts title, url, date published according to the assigned label.

Assigned/retrieve multiple posts by its label using the same format as above. Below are the details description each attributes require:-

---

Attributes

---

class
Required value: sitemap (required)
Description: The DOM element reference by class attribute to append retrieved posts by label.

---

data-headings
Required value: string/HTML
Description: Text to display at retrieved post by label.

---

data-label
Required value: string
Description: The label assigned to retrieve posts. Value is capital case sensitive. Letter spacing must be replaced with %20.

---

data-results
Required value: integer
Description: The total amount of posts to retrieve by label from Blogger servers.

---

Contact Form & Page

This section covers theme contact page, contact form helpers, variables & customization using the built in Blogger form functionality.

---

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 all handled by Blogger, all form submission will be sent to the email addresses registered to the blog.

Customize form error & success handling text at variables assigned in template HTML. Below are the contact form variables available & its description.

var CONTACT = {
  'SendingMsg' : '<i class="md-icons md-18">settings</i> Processing...',
  'SentMsg' : '<i class="md-icons md-18">done</i> Thank you. Your message has been sent.',
  'NotSentMsg' : '<i class="md-icons md-18">warning</i> We\'re sorry. Message could not be sent, please try again later.',
  'InvalidEmailMsg' : '<i class="md-icons md-18">warning</i> Email address required.',
  'EmptyMessageMsg' : '<i class="md-icons md-18">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.

---

Theme Optimizations

This section covers theme optimization's in accordance to Accelerated Mobile Pages (AMP) & Google search engine guidelines additional support for search engines.

---

Search Engine Meta

Twitter Card

Update twitter name & creator at marked red arrow. Replace text inside content="...".

Post Image Fallback

Update blog page image fallback URL at marked red arrow. replace content="..." with the uploaded image URL.

Mobile Icons

Update uploaded image URL to set as mobile browser apps icons. Replace content="..." with uploaded image icon URL. View image size & format in theme download files.

Use Blog favicon widget to update/upload favicon images.

Mobile Browser Bar

Update custom mobile browser upper tab color at marked red arrow. Replace content="..." with color of choice.

Google Plus Page Links

Update Google plus publisher & author to link to assigned profile pages.

Google Analytics

Update Google analytics unique id.

Social Share

Locating, add, remove social share AMP components. Accelerated Mobile pages social share components automatically extracts meta data from your blog. Further enhancements can be viewed at official AMP Project web page.

Publishing Posts

This section covers tips & tricks to further enhance blog posts, assigning categories/labels, add meta descriptions & techniques used to use AMP components (if required).

---

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

Always a good practise 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.

Need Assistance?
Contact us here.