Add a Simple Subscription Box To Blogger Blog

Having an Email subscription box helps you visitors to easily subscribe you by email and receive latest updates directly to their inbox. An email subscription box helps you in increasing your blog traffic. Subscribers show the popularity of a blog. So it is important to increase your subscriber list and one of the best ways for increasing subscribers is by adding an Email Subscription box to your Blog.

Today, in this tutorials, we're going to share a simple, clean and attractive Email Subscription widget for blogger. Hope you like it!

How to add this widget to your blog

Step 1. Go to Blogger dashboard

Step 2. Click on Layout >>> Add a Gadget

Step 3. Now, Choose HTML/JavaScript from the list of Gadgets.

Step 4. Copy and Paste the below code in the Content box.

HTML/JavaScript

HTML/JavaScript

HTML/JavaScript

 

<style> .tct-email{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAj9AYrPrycSelcxqraIuGhlRdGQP3yO2b1rvejReeUhLeVdEC-ZeUhnK2WXbCD4Jnk9f-5re3z6hkwm8EuuksFU16qsH0lx6B2iRBM0a3galuxOI9k7rQHWNMVRKcCfrbZF8BbGfw12-v/s1600/email.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; } .tct-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; } .tct-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:170px; color:#666;} </style> <div class="tct-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=blogolect', '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="blogolect" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input class="tct-emailsubmit" value="Submit" type="submit" /> </form> </div>

Step 5. Replace Blogolect with your feed title/Username
Step 6. Hit the Save Button
And you're done!

Share This:

Tags:

Widgets

• Prevoius
• Next