Follow by Email (Subscribe) Pop-Up Modal Blogger Widget with Timer

RawGit CDN will be shutting down soon (thanks RawGit for all these years!). All CDN files is now delivered by https://cdn.staticaly.com/. We guess that you need to update your Blogger widget codes too!

Google Feedburner services has been deprecated. Users may need to switch to 3rd party subscription services instead.

Ever wonder how blogs on Blogger have that cool Subscribe by Email appeared on their blog pages after several seconds when visiting?

Now you can add one to to your blog(s) on Blogger, without ever coding or copy paste codes in your themes. Use this simple easy to use & setup widget with popup displays best on mobile or any screen sizes - Responsive!

You can add, remove, enable/disable, set the appropriate time to initiate & also set the expiry period when the pop up should display to your regular blog readers.

This plugin is lightweight (uses less than 100 lines of hand written vanilla javascrpt -- un-compressed) & works on most modern web browsers.

Refresh this blog page to see it in action!

Why Add Pop up Subscribe by Email Modal to my Blogger pages?

Let's your readers to easily subscribe to your blog/posts to receive instant updates via email notification.
Increase subscribers sign-ups easily.
Consistent traffic to your blog pages due to auto email notifier by Google Feedburner services.
Add custom text/designs to suit your current blog design.
Add text to alert readers on upcoming releases.
Plugin un-obstructive, quick setup & provides options for customizations.
And many many more...

Here's how easy to add Follow by Email (Subscribe) Pop Up Modal Widget to

Reaching users installed & counting...
Thank you for the support! — Irsah inDesigns

By clicking the "Add Modal Popup Widget Form widget", you have read & agreed on the Terms of Service & Software Policy

Version History

0-9-0 - October 2017

Widget/plugin release

1.0 How to Install Follow by Email (Subscribe) Popup Modal Widget?

While sign in to Blogger, click "Add Pop Up Modal (js) Widget" button above
At Blogger Add Page Element, select your blog to install this widget
Click Add Widget
Locate the added widget and drag & drop to place them anywhere in the footer section of your Blog Layout -- the lower the better.
Preview your new widget which will be located at your Layout > Footer section.
Click Edit to setup your Pop up Modal Follow by Email (Subscribe) options.

If you need to preview the widget contents you can click Edit Content.

Free Blogger Widget Installer Follow by Email Gadget Pop up

1.1 Adding & Removing Widget

You can remove the widget anytime you like and re-install again but do take note on the dependencies as stated below.

This widget is 100% safe & secured, no encryption -- read able codes & mark-ups.

1.2 Widget Placement

Place your custom widget anywhere available in your theme layout, best placed in the footer section of theme. Use Layout drag & drop feature to setup your widget placement accordingly.

Use Blogger Widget Folloe by Email Pop Up Sign In Subscribers

2.0 Follow by Email (Subscribe) Pop Up Modal Setup

Setting up Followby Email (Subscribe) Pop Up Modal with timer is made super easy with the available options included with widget install.

Make sure that you have installed a Follow by Email gadget in your blog Layout.

2.1 Pop Up Modal Settings

Open Pop up Modal Plugin (Js) widget & you will see below:-

<script>
(function(w,d){
  var widget_id = 'FollowByEmail1';
  var timer = 8000;
//
  var MyModal = new BlogrCartModal({
    className: 'fade-and-drop',
    closeButton: true,
    content: d.getElementById( widget_id ),
    maxWidth: 600,
    minWidth: 200,
    overlay: true,
    expires: 0,
    cid: 'blogrcart'
  });
  w.setTimeout(function() { MyModal.init() }, timer );
  d.onkeydown = function(evt) {
    evt = evt || w.event;
    if (evt.keyCode == 27) { MyModal.close() };
  };
})(window,document);
</script>

Variable Description

widget_id
The Follow by Email widget ID. Normally FollowByEmail1 is assigned when installed in blog layout.

timer
The timing in milliseconds for the popup modal to initiate once the blog page is in view. - default 8000 (8s).

To prevent being penalized for content obstructions in search engines, set a longer timing delay to initiate pop up modal.

Constructor

BlogrCartModal({ options })
Plugin constructor & function - handles pop up modal & integrations.

Plugin options

options.className
A unique classname identifier to append to pop up modal when adding custom CSS/styles to add custom effects.

options.closeButton
true or false - Enables or disables the display of the close button.

options.content
object or HTML - The reference by ID to append the HTML element on a web page.

options.maxWidth
integer - The max width of pop up modal.

options.overlay
true or false - Enable or disable the pop up overlay.

options.expires
integer - The amount in days the pop up will initiate for a current user.

options.cid
string - A unique cookie session identifier to save at users web browsers.

Plugin Built-In Helpers

NewObject.init()
Built-in function to initiate pop up modal once all custom parameters has been assigned.

NewObject.close()
Built-in function to "force" close pop up modal.

3.0 Adding Text & Styles to Follow by Email Gadget

Adding Text

Text included with your FollowByEmail1 gadget will also be displayed with the pop up modal. Watever title you have assigned will display as the pop up modal title.

Add your own text/image with your FollowByEmail1 widget to further enhance users experience.

Go to Theme > Edit HTML
click "Jump to Widget"
select 'FollowByEmail1" widget
expand <b:includable id="main">
Add your custom text/image above the <form> tag,
click Save Theme to apply your changes.

Adding Styles

By default, your theme fonts & Follow by Email gadget will inherit the existing styles.

You can enhance the design by using CSS to target your Follow by Email gadget inside the pop up modal container. Use below:-

<style>

.bcModal-modal #FollowByEmail1 {

  /* CSS styles for follow by email gadget */

}

.bcModal-modal form {

  /* CSS styles for follow by email form */

}

.bcModal-modal input {

  /* CSS styles for follow by email form inputs */

}

.bcModal-modal input[type=text] {

  /* CSS styles for follow by email form input text field only */

}

.bcModal-modal input[type=submit] {

  /* CSS styles for follow by email form input submit button only */

}

</style>

4.0 Dependencies

All codes & detail documentation made available at the respective GitHub pages & delivered via https://cdn.staticaly.com/gh/ Content Delivery Network (CDN).

<script src="https://cdn.staticaly.com/gh/BlogrCart/widget/f99dac3c/pop-up-modal.min.js" type="text/javascript"></script>

5.0 Troubleshooting & Custom Setup

You can contact us by using our Contact page here Please provide your name, blog URL, and a detail description of your issues -- our Theme designers & developer team may not entertain if failure to do so.

If you need custom setup, removing attribution, custom pop up styling & effects --you can also use our Contact page to get in touch with us.

This software/application is provided as-is with no warranty -- developer/author/designers will not be reliable for any loss whatsoever.

What do you think? Do you have any feedback or additional functions that needs to be included with pop-up modal Follow by Email gadget? Add your questions & comments below...

Irsah inDesigns Blog

Topics

Archive