AMPaction

Topics

AMP Popular Gadget
search

share
  1. AMPaction
  2. Theme
person irsah
Installing AMPaction Blogger theme with AMP integration is just like installing any other Blogger Themes. In this post, we will show you the quick & easy steps to install, customize & set your theme according to your needs. Your AMP valid blog posts & pages will be ready in no time!




Install Theme

Before you start, always choose/revert your blog & use Blogger Simple template.

  • Unzip & open downloaded AMPaction theme file
  • Select All theme codes & copy to clipboard.
  • Go to Theme > click Edit HTML
  • Select All existing theme codes
  • While selected, paste AMPaction theme codes at code editor from Clipboard.
  • Click Save Theme.


Other Settings You Might Consider

Turn Off Blogger Mobile Template

  • Go to Theme > click Gear button
  • Select No, use desktop view.
  • Click Save.

Add Meta Description

  • Go to Settings > Search Preferences
  • At Meta Tags > click Edit
  • Add unique meta description for your Blog
  • Click Save

Allow Blog Feed to Full

  • Go to Settings > Other
  • Site Feed > at Allow Blog Feed
  • Select Full at dropdown
  • click Save Settings


Publishing Posts/Pages

Publishing a post or pages is just like you normally do on Blogger. Insert post images, videos, add paragraphs & heading titles accordingly. Use Labels to categorize your posts. Add Search Description to enhance you blog pages in search engines.

No HTML editing required as all posts/pages are AMP valid post pages - all handled by AMPaction Blogger theme.


Blogger Layout

Drag & drop blogger gadgets where it may be applied. Use AMP tags where it is required. Use widget functionalities accordingly.

Use custom gadgets to setup your theme functionalities for example enable comments system, add amp-ad tags, insert links, insert text, customize Blogger widget settings etc.


Header Social Icons

For sharing to Facebook using your Fb App ID, follow the instruction below. First get your Fb App ID at Fb Developer page.

  • Go Layout 
  • Find Header Share Icons widget & click Edit
  • Update highlighted yelow below to include your Fb App ID.

<amp-social-share height='40' layout='fixed' type='twitter' width='40'></amp-social-share>
<amp-social-share data-param-app_id='1234567890123567' height='40' layout='fixed' type='facebook' width='40'></amp-social-share>
<amp-social-share height='40' layout='fixed' type='gplus' width='40'></amp-social-share>
<amp-social-share height='40' layout='fixed' type='pinterest' width='40'></amp-social-share>

  • Click Save
  • Click Save Arrangements
  • Preview sharing icons & test if required.

Quick Tip: Use above markup to add or remove social sharing buttons accordingly



Enable DISQUS Comments


  • Go to Layout
  • Find DISQUS widget click Edit
  • Add disqus_shortname at widget Content
  • Click Save
  • Drag & drop accordingly for placement below blog posts.
  • Click Save Arrangements
  • Preview changes.

Quick Tips: To disable DISQUS, at widget Title add disable & Save widget.


Enable Google+ Comments

By default Google+ comments is enabled. To disable Google+ comments:-

  • Go Layout 
  • Find Google+ comments widget & click Edit
  • Leave widget Title empty
  • Click Save
  • Click Save Arrangements
  • Preview blog if required.

Quick Tips: To disable Google+ comments, at widget Title add disable & Save widget.


Enable Contact Form

By default, the contact form widget is not registered to your blog. To enable:-

  • Go Layout 
  • Find Contact Form widget & click Edit
  • Click Save
  • Click Save Arrangements
  • Preview blog if required.

To display the contact form, create a new Blogger Page:-

  • Go to Pages
  • Click New Page
  • Provide the page a Title
  • Add some text in post editor body
  • click HTML mode & copy below helper tag in editor body

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

  • Return to Compose Mode
  • Click Publish
  • Preview your contact page.

You can further customize Contact Form variables to set the text for warning, success. Here's how:-

  • Go Layout 
  • Find Contact Form Settings widget & click Edit
  • Update highlighted yelow below to include your custom text.

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

  • Click Save
  • Click Save Arrangements
  • Preview contact page & test if required.


Enable Ads

amp-ad for Adsense come pre-installed with theme. Edit the assigned gadget & add in your Adsense preferences.

  • Go to Layout
  • Find AMP Ads widget click Edit
  • Update/change values at highlighted accordingly - below is an example:-

<amp-ad
data-ad-client='ca-pub-XXXXXXXXXXXXXXXXXX'
data-ad-slot='YYYYYYYYYY'
height='60'
type='adsense'
width='320'>
</amp-ad>

  • Click Save
  • Click Save Arrangements
  • Preview if required.

Quick Tips: To disable any amp-ad widget, at widget Title add disable then click Save.


Enable Sticky Ads

amp-sticky-ad comes pre-installed with theme. Add in your Adsense preference accordingly.

  • Go to Layout
  • find Sticky Ads (Web & Mobile) widget & click Edit
  • Update highlighted values like example below to your Adsense preferences.

<amp-sticky-ad layout='nodisplay'>
<amp-ad
data-ad-client='ca-pub-XXXXXXXXXXXXXXXXXX'
data-ad-slot='YYYYYYYYYY'
height='60'
type='adsense'
width='320'>
</amp-ad>
</amp-sticky-ad>

  • Click Save
  • Click Save Arrangements
  • Preview if required

Quick Tips: To disable amp-sticky-ad, at widget title add disable & click Save


Enable User Notification

To add user notification, use below amp-user-notification tag & edit the text accordingly. There are 2 user-notify widgets assigned: (1) displayed in mobile views (2) displayed in desktop views.

<amp-user-notification id='banner1' layout='nodisplay' data-persist-dismissal='false'>
  <button class='btn btn-primary' on='tap:banner1.dismiss'>
    <i class="material-icons md-18">close</i>
  </button>
<div>
Add user notification text here.
</div>
</amp-user-notification>


Setup Related Posts

By default related posts is enabled. To change/update related post title & settings:-

  • Go to Theme click Edit HTML
  • At Jump to Widget select Blog1
  • Find & expand id='post-related' widget tag
  • Update accordingly
  • Click Save Theme
  • Preview changes.


Setup Social Share

For sharing to Facebook using your Fb App ID follow the instructions below. First get your Fb App ID at Fb Developer page.

  • Go Layout 
  • Find Social Share Icons widget & click Edit
  • Update highlighted yelow below to include your Fb App ID.

<div class='share-icon'>
  <amp-social-share height='80' type='twitter' width='80'></amp-social-share>
</div>
<div class='share-icon'>
  <amp-social-share data-param-app_id='1234567890123567' height='80' type='facebook' width='80'></amp-social-share>
</div>
<div class='share-icon'>
  <amp-social-share height='80' type='gplus' width='80'></amp-social-share>
</div>
<div class='share-icon'>
  <amp-social-share height='80' type='pinterest' width='80'></amp-social-share>
</div>
<div class='share-icon'>
  <amp-social-share height='80' type='linkedin' width='80'></amp-social-share></amp-social-share>
</div>

  • Click Save
  • Click Save Arrangements
  • Preview sharing icons & test if required.

Quick Tips: Use above markup to add or remove social sharing button accordingly


Optimizing Theme

Add Mobile Apps Icons

First create your mobile app icon by using your preferred image/illustration image editor. Save the icons as a .png image file at a size not larger than 215px X 215px. To upload:-

  • Open any Blogger pages/post
  • Upload the image using the Add Image icon
  • When ready click Insert
  • Highlight image then Right click select Copy Image Address
  • Remove image if required
  • Close post/pages

To apply the icon in theme:-

  • Go to Theme > click Edit HTML
  • Scroll down and find <!-- Icons -->
  • value='&quot;{{IMAGE_URL}}&quot;'
  • Replace & use you icon URL at highlighted yellow
  • Click Save Theme
  • Preview in mobile if required

Add Fallback Image

Choose an image preferably minimum 900px X 675px image size and upload the image using any Blogger post/page. To upload:-

  • Open any Blogger pages/post
  • Upload the image using the Add Image icon
  • When ready click Insert
  • Highlight image then Right click select Copy Image Address
  • Remove image if required
  • Close post/pages

To apply the fallback image in theme:-

  • Go to Theme > click Edit HTML
  • Scroll down and find <!-- Meta Images -->
  • value='&quot;{{IMAGE_URL}}&quot;'
  • Replace & use you image URL at highlighted yellow
  • Click Save Theme

Mobile Browser Bar Color

  • Go to Theme > click Edit HTML
  • Scroll down and find <!-- Mobile browsers -->
  • value='&quot;{{COLOR_CODE}}&quot;'
  • Replace & use your selected color code at highlighted yellow
  • Click Save Theme

Auto Page Validator/Check

AMPaction Blogger theme comes pre-installed with page validator assistant to check valid AMP page & mobile friendly test by Google.

Enable this feature by adding a classname of dev-mode at Theme > Edit HTML > find <body/> tag and add the classname > Save Theme.

By doing so, 2 buttons will be displayed below at footer for you to check your pages accordingly. No URL to configure and paste to ;)

Pre-assigned Classes & Styles

This theme also comes pre-installed with pre-assigned class name to re-use anywhere at your blog pages HTML. By applying these assigned classnames, it will allow your newly added elements to style accordingly with theme.

Create buttons, forms, responsive tables, responsive videos easily by adding the classname accordingly or markup accordingly.

Details of usages available here: https://ampaction.blogspot.my/p/typography.html

Customize CSS

AMPaction Blogger theme uses CSS to customize its color, layout and page elements. Each blog page have been assigned with a unique classname fr easy style targetting.

Location to customiize CSS would be at:-

  • Go to Theme > click Edit HTML
  • Scroll to ]]></style>
  • All customize CSS would be preferred located in between /* Add Custom CSS */ and /* Add Custom CSS */ indicators.
  • This will allow you to easily target which page element you require to make style changes without compromising the initial theme layout.

In addition, unique classnames have been assigned to <body/> tag so users can use CSS to target changes for any individual blog pages. The unique classnames are as follows:- 

.page-home - added on blog homepage
.page-index - added on blog index pages
.page-item - added on blog posts pages
.page-static - added on blog static pages
.page-feed - added on blog feed pages
.page-search - added on blog search pages
.page-error - added on blog page error page
.page-archive - added on blog arhive pages
.page-label - added on blog labels display
.preview - added when viewed at blog dashboard Layout

Example usage:- 
If you want to add paddings for your post title at home page then reduce the paddings at other pages. Here's an example CSS usage:-  

/*
* paddings used on other pages
*/
.post-title { padding : 20px; }

/* 
* paddings used only at blog homepage
* .page-home indicates the page is at home page
*/
.page-home .post-title { padding: 40px; }

For targeting mobile & web views 2 additional unique classname is assigned & they are:-

.view-mobile - available when viewed in mobile devices
.view-web - available when viewed on larger screens

AMPaction | AMP HTML Blogger Themes
Rated 5/5 based on 99 reviews
Installing AMPaction Blogger theme with AMP integration is just like installing any other Blogger Themes. In this post, we will show you the quick & easy steps to install, customize & set your theme according to your needs. Your AMP valid blog posts & pages will be ready in no time!




Ins…
Install AMPaction Blogger Theme
5/ 5
Installing AMPaction Blogger theme with AMP integration is just like installing any other Blogger Themes. In this post, we will show you the quick & easy s…

DISQUS Comments expand_more

Load Comments

Facebook Commentsexpand_more

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...
MOBILE TEST launch VALIDATE AMP launch