How To Add Email Subscription Box With Social Media To Blogger Post

Today, I will quickly walk you through how to Add Email Subscription Box to blogger post. It comes with Social Media buttons which makes the "Email Subscription Box" very attractive.

5 Easy Steps To Add Email Subscription Box With Social Media To Blogger Post

1. Go to your Blogger Dashboard

2. Locate Template > EDIT HTML
3. Use crtl F to find the code below

<data:post.body/>

4. Paste the code below immediately after the code above.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    form.feedburner{
    margin:20px 0 0;
    display:block;
    clear:both;
    }
    .TKstyle{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYC-UtfQsJ4nZp0B2E_QnuuS0cNOCd-mHChfEkCvAGbHz5Jxjvt1w-Odb4LSkV2cMV7lnnCi6-Jfh0hlnuC8W7_qXvGPsLch3uNAIWzmsx7oSsBcvz8UTBRbhO3Pk7AYXbmTe0MgWLp6M/h120/email_icon.png) no-repeat scroll 4px center transparent;
    padding:7px 15px 7px 35px;
    color:#666;
    font-weight:bold;
    text-decoration:none;
    border:1px solid #D3D3D3;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
    }
    .TKsubmit{
    color:#666;
    font-weight:bold;
    text-decoration:none;
    padding:6px 15px;
    border:1px solid #D3D3D3;
    cursor: pointer;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -goog-ms-border-radius: 4px;
    border-radius: 4px;
    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
    background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    }
    #emailwidget-outer {
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -goog-ms-border-radius: 10px 10px 10px 10px;
    border-radius: 10px;
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    padding: 8px;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width:520px;
    }
    #emailwidget-outer:hover{
    background: none repeat scroll 0 0 #FFF;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
    }
    #emailwidget-outer td{
    padding:3px 0;
    }
    </style>
    <center>
    <div id='emailwidget-outer'>
    <div id='emailwidget'>
    <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
    <tbody>
    <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 20px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
    <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://FEED BURNER URL&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
    <input name='uri' type='hidden' value='Realcombiz'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input class='TKstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
    <input alt='' class='TKsubmit' title='' type='submit' value='Submit'/>
    </form>
    </td>
    <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
    <a href='http://FEEDBURNER URL' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqOLZZPx_IV2tBKKPobOSHZcmP2XPj97LN3DSf5uT3g7nHmT4C2DLHwt8rpsuEsY-_CoW3lXXGI9ITi8cMoaDFQYvSdxkW1OCt0AwtD-RUe-Z66IxmMVUoHaLcpor34s08i96Rje0xpbw/h120/rss-30x43.png'/></a>
    <a href='http://twitter.com/USERNAME' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS1rnWthNgimIZpT3JF_Fq1nmGr3USVXNhqE1YuQW29BXvl0kFHFeaQRX4yf3juiBDQNByq20v0TCro3-ArK9wbJ1g8uKK1ZhUCBySOsqXx5iEMvtHMNgrtguFQex4qaU5xYcSKM6mKUw/h120/twitter-30x43.png '/></a>
    <a href='http://INSERT FACEBOOK PAGE URL HERE' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWcsSoCF4-qNBSXVFUyp8WRmrb5ocEjGORjBNvqwQV4aBJ1tuJTlBakjG-JzF9u3lUBrbCk6mD0pHCtrJWOEK3GGHJTYDORnX_ijXq2qzGaSfPjzFPdXj0FmTMVogzYoqTB3SZ5dK22CM/h120/facebook-30x43.png '/></a>
    <a href='https://plus.google.com/GOOGLE PLUS ID' rel='nofollow' target='_blank' title='Follow us on Google+'><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWDae1rDdG48Hv9YN9cIwxjbk7oKO2Y1rrt7dYGWlkNfJZhLd4IDyo0M6Qbzg8PVic-FHSVeJnFZEXROFNXnUu_4GZ8tmM3TNmoVSlpsHPa0V-BcGRMinu1sm0eGBz0Tft9WqDJW_8SAw/h120/googleplus-30x43.png '/></a>
    </td>
    </tr>
    </tbody></table>
    <div align='right'><span style='font-style: italic; font-size: 8px; color: solid #3333FF;'><a href='http://thatnaijablog.com' style='text-decoration: none;' target='_blank'><font color='#3333FF' decoration='none'>[Get this widget]</font></a></span></div>
    </div></div>
    </center>
    </b:if>

5. Change all social media links marked RED with your url and Save Template.

That's it. You should now see Email Subscription Box With Social Media under your blog posts.  Hope it worked for you?