Subscribe By Email Widget For Blogger (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?)
    3. ]]></b:skin>
  3. Copy the code below and insert it right above the (]]></b:skin>) tag.
    4. .subs_wrap {   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpGOK1e04GGD5MLKHpcXTdfAy5Ab5ObiiYRBJe4HlVpfhEAdaDGsWbY2uedX_pI1_KqzwC8HhvLvE5_NLxts6sOrqbFYFRvRh3TT12EK9I5FBgPULifxG9_surnkctdxILkW4hzqFtLOg/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.
    4. <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 :).

We will keep on sharing such useful resources and widgets to help our readers as much as possible, If you are not satisfied with the design, you can always revamp it according to your blog layout or color scheme or add some twists through CSS3. Need further help or need background image in different color schemes please let us know we will try to upload backgrounds in various color schemes in future as much as we can.

When we do a significant update to the tutorial, we will post a notice on top of the article. So stay Updated for the future updates by subscribing our news feed or you can also join us on Facebook, twitter, Pinterest even Google Plus there is not restriction:).
Stay Blessed and Happy Blogging.
Author on

No comments Post Yours!

Post a Comment