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.
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-lightboxcomponent is installed in theme<head> ... </head> - Update Follow by Email gadget with
amp-lightboxHTML tags - Add
amp-lighboxCSS 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.
- At Theme > Edit HTML
- click "Jump to Widget > select "FollowByEmail*"
- At FollowByEmail* gadget markups expand
<b:includable id='main'> ...</b:includable> - If you do not have a supported FollowByEmail gadget with AMP, you can get the full codes/markup here: https://blogr-amp.blogspot.my/2017/02/amp-html-follow-subscribe-by-email.html
<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 != ""'><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-lightboxmarkup & 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!
Working to get connected...
Ooops! We're having trouble connecting. Please refresh your page or contact us...