Simple Process to add an Email Subscription Widget for your Blogger

For any Blogger Platform there is a priority need of an Email Subscription Widget which helps the blogger keep in-touch with their subscribers and send timely updates of the website via an Email in the right time. Users who like the website content just enter their email id and do subscribe in the Subscription widget. 

Readers further get regular updates from the website which directly increases traffic to the portal via right content. Subscription widget help blog owners in creating an active community of readers and boost your blog traffic. 

Do Add Email Subscription Widget to Blog Like Below :-

As we are aware that Blogger provides custom stylish email subscription box with social media integration. Quickstartz here brings few subscription widgets which are easily customazable as per the blogger requirements.

1. Go to Theme > Edit HTML after log-in to your Blogger

2. Click Search in Theme Code and click ---> </head>

3. Get this below mentioned code right above it

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/all.min.css">

4. Then Click Save

Here you need to Fill-up the fields and generate code

Get Blog URI:

1. Visit https://feedburner.google.com.

2. Then navigate to Publicize > Email Subscription and find your uri value in given box.

For an instance: http://feedburner.google.com/fb/a/mailverify?uri=URFeedburnerID and <input name='uri' type='hidden' value='URFeedburnerID'/>

Go to Layout --> Add a Gadget

Pop-up Window appears, Go down and Click on HTML/JavaScript gadget

Paste the following code in the HTML/JavaScript box

<style>

.hl-email{

background:url(http://4.bp.blogspot.com/-u3UaeUufpmI/T8lFuelsg8I/AAAAAAAACQY/tOWbHsgTYKc/s1600/mail.png) no-repeat 0px 12px ;

width:300px;

padding:10px 0 0 55px;

float:left;

font-size:1.4em;

font-weight:bold;

margin:0 0 10px 0;

color:#686B6C;

}

.hl-emailsubmit{

background:#9B9895;

cursor:pointer;

color:#fff;

border:none;

padding:3px;

text-shadow:0 -1px 1px rgba(0,0,0,0.25);

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

font:12px sans-serif;

}

.hl-emailsubmit:hover{

background:#E98313;

}

.textarea{

padding:2px;

margin:6px 2px 6px 2px;

background:#f9f9f9;

border:1px solid #ccc;

resize:none;

box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);

-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);

-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;

width:130px;

color:#666;}

</style>

<div class="hl-email">

Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=UR ID Here', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />

<input type="hidden" value="UR ID here" name="uri"/><input type="hidden" name="loc" value="en_US"/>

<input class="hl-emailsubmit" value="Submit" type="submit" />

</form>

</div>

After the above steps, Save the gadget and go to your website/Blog. Go the widget of Subscription and enter your email id to test whether the subscription is working or not.

With these simple and quick tips blogger helps its users to provide timely notifications of your latest updates.

Post Author - Kalyan (Tips)