Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.


Pop Up Follow/Subscribe by Email Widget for AMP HTML Blogger Themes

Pop Up Follow/Subscribe by Email Widget for AMP HTML Blogger Themes
Follow by Email or Subscribe Blogger blog via email helps blog owners to get better engagement with  readers & followers -- blog audience. Your blog readers & followers can easily receive a blog updates directly to their email inbox via the free email subscription service powered by Google Feedburner,

Here is the quick & easy alternative to further extend your Blogspot blogs with AMP HTML integrated themes to add a pop up Follow by Email gadget using amp-lightbox component -- cleaning up your blog clutter.

In Blogr-AMP (V2), a new & improved Follow by Email location with custom click-to-action texts have been applied to further optimize reach to Blogger blog's audience. Find out more right here.

Install Follow by Email gadget with amp-lightbox Blogger Theme

In a nutshell here is the fundamentals on how to add a Subscribe/Follow by Email pop up using amp-lightbox component for Blogger blogs with AMP HTML.

  • Backup your current theme beforehand
  • Check if amp-lightbox component is installed in theme <head> ... </head>
  • Update Follow by Email gadget with amp-lightbox HTML tags
  • Add amp-lighbox CSS for personalisation/styling
  • Save Theme
  • Preview changes.

No 3rd party application to add or host widgets & no subscriptions to subscribe to. Free yourself from occurring online monthly expenses & help you to continue to write more for your blog!

Check if amp-lightbox Installed.


amp-lightbox component must be availble in order for the pop up Follow by Email functionality to work. Check in between your Blogger theme <head> ... </head> tag if the component exists.

If not add one like so before/above the theme </head> tag.

<b:tag async='async' custom-element='amp-lightbox' name='script' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'/>

Update Follow by Email Gadget with amp-lightbox Tags.



          <b:widget id='FollowByEmail99' title='Follow By Email' type='FollowByEmail' version='1'>
            <b:includable id='main'>
      <b:class name='blogramp-subscribe'/>
      <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
        <b:tag class='btn btn-primary' name='button'>
        <b:attr name='on' value='tap:blogramp-subs'/>
   <data:title/>
 </b:tag>
      <b:tag id='blogramp-subs' name='amp-lightbox'>
        <b:attr name='layout' value='nodisplay'/>
        <div class='widget-content'>
          <b:tag class='btn btn-primary' name='button'>
            <b:attr name='on' value='tap:blogramp-subs.close'/>
            x
          </b:tag>
          <div class='follow-by-email-inner'>

            ... {{ follow by email form markups }} ...

          </div>
        </div>
      </b:tag>
</b:includable>
          </b:widget>

  • Highlighted green are your widget indicators/reference.
  • Remove highlighted red
  • Add all new amp-lightbox markup & buttons as highlighted yellow.
  • click Save Theme

Careful consideration on the placement of the new tags highlighted in yellow. None highlighted areas are existing AMP HTML supported Follow by Email Blogger gadget markups : https://blogr-amp.blogspot.my/2017/02/amp-html-follow-subscribe-by-email.html

After these changes, the widget title will display as the Follow by Email button text -- cool eh?

Add Pop Up Follow by Email Styling.


Scroll to the top of your Theme codes and find </style> tag.

Copy below & add the new styles before/above </style> tag.

.blogramp-subscribe { }

.blogramp-subscribe amp-lightbox {
  background-color: rgba(0,0,0,.85);
}

.blogramp-subscribe amp-lightbox > div {
  display: table;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align:center;
}

.blogramp-subscribe amp-lightbox > div > div {
  padding: 0;
  display: table-cell;
  vertical-align: middle;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.blogramp-subscribe button {
  font-weight: 700;
}

.blogramp-subscribe button[on="tap:blogramp-subs"] { }

.blogramp-subscribe button[on="tap:blogramp-subs.close"] {
  padding:0;
  margin:0;
  background-color: transparent;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  z-index: 99;
  border:2px solid #fff;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1em;
}

.blogramp-subscribe amp-lightbox form {
  padding: 1em;
  margin:0 auto;
}

@media (min-width:768px){
  .blogramp-subscribe > amp-lightbox form {
    width:60%;
  }
}


  • click Save Theme
  • Refresh your blog pages views to see the changes.


You can see a live working example Follow by Email widget/gadget at this blog integrated with AMP HTML..

Existing widget form fields & styling depends on existing styles applied at/with your existing theme.

In order for you to re-style your new Follow by Email gadget, use the .blogramp-subscribe style class to target only the lightbox styles -- without compromising your existing theme styles.

CSS References


.blogramp-subscribe { }
New class name added to the FollowByEmail widget for reference targeting.

.blogramp-subscribe amp-lightbox { }
Change the lightbox background color.

.blogramp-subscribe button[on="tap:blogramp-subs"] { }
To style the click action button

.blogramp-subscribe button[on="tap:blogramp-subs.close"] { }
Used to style the lightbox close button

.blogramp-subscribe amp-lightbox form { }
To style the Follow by Email form container.

Having trouble styling your new pop up Follow by Email gadget? Contact theme contributors here or use the comment section below to get in touch & further discussions!


Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsInstall Follow by Email gadget with pop for AMP HTML Blogger Themes using amp-lightbox component, let blog readers subscribe by email & clean up blog layout & design clutter.Blogr-AMP: Pop Up Follow/Subscribe by Email Widget for AMP HTML Blogger Themes
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Follow by Email or Subscribe Blogger blog via email helps blog owners to get better engagement with  readers & followers -- blog audienc....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Follow us on Instagram
@irsahindesigns





More from Instagram...

Working...

Ooops! We're having trouble connecting...