Add a Simple Email Subscription Box to Blogger Blog

Having an email subscription box installed in your blogger blog is very important. Email subscription box not only let the visitor to subscribe to the updates of your blog but also results in the increment in blog readers and as a result of this, increase in pageviews.

You will find many email subscription box templates on the internet but having the right one which matches your blog template is very important. Look at Galakcious, you will see an email subscription box which matches the template.

Got it from BloggerYard, I modified this email subscription box. Today, I will show you how you can add it to your blogger blog. Just follow these simple steps and you will be done.

How to add this email subscription box?

• Go to Blogger >> Layout >> Add a Gadget
• Select HTML/JavaScript and paste the following code there

<div id='byard-emailsubsocial'>
            <div class='heading'>
            Join Galakcious
            </div>
                 <p>Sign-Up with your email address to get updates straight in your inbox.</p>
            <div class='emailsub'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Galakcious', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' name='name' placeholder='Your Name' />
            <input type='text' name='email' placeholder='Your Email' />
            <input type="hidden" value="Galakcious" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
                        <input value="Join Now!" class="button" type="submit" />

            </form>
            </div>

            </div>

 <style type='text/css'>
     #byard-emailsubsocial {
      width: 290px;
      height: 300px;
      border: 1px solid #ddd;
        border-radius: 0px 0px 0px 0px;
     }
     #byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 22px;
font-size: 22px;
font-weight: 600;
color: #ffffff;
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: #6E6E6E;
     }
   #byard-emailsubsocial p {
    font-size: 14px;
    text-align: center;
    color: #6E6E6E;
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #byard-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #byard-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    width: 92%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 0px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #byard-emailsubsocial .emailsub input:focus {
    border-color:#04B486;
    outline: none;
    box-shadow: 0 0 2px 1px #04B486;
   }
   #byard-emailsubsocial .emailsub .button {
    background: #6E6E6E;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #04B486;
    transition:background .4s linear;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 600;
    cursor:pointer;
   }
   #byard-emailsubsocial .emailsub .button:hover{
    background: #04B486;
   }
     </style>

• Replace Galakcious with your blog/website name
• Save the template and open the blog
• Done! You've successfully integrated this simple but attractive email subscription box to your blogger blog.

In case you find any difficulty while adding this, feel free to ask. Thanks :)