Subscribe By Email Widget For Blogger Blog (Flat 2.0 Design)

While selecting the best layout, widgets and editing your blog design, it’s a good idea to pay more attention to what works and what does not, what inspires you and what makes you immediately jump to another blog. Beginners often make a few well-known mistakes in designing layouts that come back and bite them when they least expect.

So based on the above facts we have setup tutorial on CSS3 code snippets of Awesome RSS Email Subscription Box, we will also explain how you can implement it into your own Blogger blog, you can customize the code in the way you want, if you have any suggestions or questions about the tutorial you can share with us in the comments form below, even you need background in another color scheme just let us know, we will design it free for you.

In this part of the tutorial, we’re using Montserrat Font, which is you can get free from Google Font Library or you can change font to any other by changing "font-family: 'Montserrat', sans-serif;".

Live Demo

How to Add It To Blogger Blog

We’re going to add style sheet into our template source code, before making changes please a backup copy of your template then go ahead to edit your template source code.

1. Go to blogger dashboard > template > edit html
2. Search for the following code (Need Help?)

]]></b:skin>

3. Copy the code below and insert it right above the (]]></b:skin>) tag.

.subs_wrap {   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDQQLGNz9jbCX3zFT95PL0SMJ3qnsRCLrk8HQVG_34vtqcw07-ikZCMLdLGLES-9k3nJxwEGZ32KZr2dST690pCsOfGuJc3rPlcFlVDaO34GDMnpSX1TBwstzdJJnqRDQDRtYPW4HjyMs/s1600/bg.png);   position: relative;   left: 0px;   top: 0px;   width: 320px;   height: 232px;   text-align: center;   z-index: 1; }
.subs_wrap h4 {   text-align: center;   font-family: 'Verdana', sans-serif;   font-size: 30px;   font-weight: bold;   color: #FFF;   margin: 0 auto;   padding: 35px 0 0 0;   line-height: 1; }
.subs_wrap p {   text-align: center;   font-family: 'Verdana', sans-serif;   font-size: 12px;   font-weight: normal;   color: rgba(255, 255, 255, 0.502);   margin: 0 auto;   padding: 0;   line-height: 2;   word-spacing: 0px; }
.email_input {   background-color: rgba(255, 255, 255);   opacity: 0.2;   position: relative;   margin: 35px 0 15px 0;   width: 150px;   height: 30px;   padding: 0 10px;   color: rgba(255, 255, 255);   border: none;   border-radius: 15px;   z-index: 3; }
.email_input:focus {   outline: none;   border: 1px solid #ee6e45;   opacity: 0.3;   -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078);   -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078);   box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078); }
.button {   background-color: rgb(255, 255, 255, 0.015);   color: rgb(236, 94, 48);   font-family: 'Verdana', sans-serif;   position: relative;   border: none;   width: 170px;   height: 30px;   z-index: 2;   border-radius: 15px;   -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078);   -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078);   box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078); }

Adding HTML Markup

1. Go to layout and Click on add a gadget link.
2. In add a gadget window, select HTML/Javascript.
3. Copy the code below and paste it inside the content box.

<div class="subs_wrap">
<h4>SUBSCRIBE</h4>
<p class="subs_p">Get the top news stories delivered to your Inbox</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=spiceblogging&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input gtbfieldid="10" class="email_input" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/>
<input value="spiceblogging" name="uri" type="hidden" />
<input name='loc' type='hidden' value='en_US'/>
<input class='button' title='signup' type='submit' value='SignUp'/>
</form>
</div>

4. Save the gadget.
5. Drag the gadget and reposition it where you want to show.
6. Click on Save button (top right hand corner). That's It. :)

To add your own image as a background, you first need to upload the image to your blogger account (free image hosting with your blogger account) and then just replace the background-image URL with your won image URL, simple as pie :).