Add Designer Email Subscription Widget Below Post In Blogger Blog |<a href="http://www.beingbloggers.com/">Being Bloggers</a>

how-to-add-email-subscription-widget-below-every-blogger-post

Hi!

All of you must be thinking that you already have a email subscription widget in the sidebar of your blog so what's the need of this extra widget.But let me tell you that email subscription widget on your sidebar hardly catches attention of anyone as your sidebar is already loaded with so many widgets, images and ads. So how can we expect a simple looking text box surrounded with so many fancy images to get attention. Adding a designer widget like this, below your post immediately catches attention of your readers and gets you a lot of email subscribers. So don't think twice. Just follow the given steps and add this widget to your blog. Let me know if you have any query or you face any problem during installation of the widget in the comments below.

How To Add This Email Subscription Widget Below Blogger Post:

To Install this widget, Follow given steps:

Step 1: Login to blogger dashboard and select your blog.

Step 2: Select Template option.

Step 3: Click on Edit HTML button.

Step 4: Click anywhere in HTML taxt area and Press cntrl+F and Search for <data:post.body/>

Step 5: Paste the given below code below/after <data:post.body/>

Step 6: Click on Save Template button.

Make following changes in the code before adding code to template:

~Replace text in red with whatever you want.

~Replace BeingBloggers with your feedburner id.

~Replace https://www.facebook.com/pages/Being-Bloggers/634304899941801 with your facebook page address and similarly Replace rest of social address with your own.

~If you want to delete any of the social media icon, then just the respective social media icon line.

For example, if you don't want to keep Linkedin Icon in your widget, then remove line

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<center>
<div id='bb-sub-widget'>
<h2>Get Access To All The Updates And Freebies</h2>
<h3>Sign Up For Our NewsLetter...</h3>
<form class="bb-form" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri='BeingBloggers', 'popupwindow', 'scrollbars=yes,width=550,height=525');return true">
<input type='text' class='email-input' onblur='if (this.value == "") {this.value = "Enter Your Email...";}' onfocus='if (this.value == "Enter Your Email...") {this.value = ""}' value='Enter Your Email...' name='email'/>
<input type="hidden" value="BeingBloggers" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="SIGN UP" class="signup" /></form>
<div class="bb-social">

<a href="https://www.facebook.com/pages/Being-Bloggers/634304899941801" title="Like Us on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2CwW5S5k7ISPWXuUIwvNTpaDI49vFhHvSS_RoDrpFK2x-ps5VtZohhjM1EcuSnK9Ouy6yG9F5OkE-NBeWjh58Cp3-rxBNx7BAdlpwV38V1XhqrSh5Lf_d8uI6ipyUNgSi04rvNqYhdffC/s1600/pinkf.png"/></a>

<a href="https://plus.google.com/100034924846082204470" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja4oIGXjNgtHppWcbFfGTFR0_6fNFd0bDTVSTd7-Vmi-0EK8yjJBF8Z1AjX4xhkkdMCQSkfDJKf9u8HtxsgyOiCuqJa64v9m54QyfBg6hCzEJiK7dMDKJWEbyAikt92QFfOx-K-t3Iwnvk/s1600/pinkg.png"/></a>
<a href="https://twitter.com/INehaMunjal" title="Follow On Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCa0Bgw2Z28RbuoA2YxocWdvlJpOxG9L5Ap1RmMDQZ8uJsB-4bP55vgwgR-1qNpNfwwralfAVb0kzomYos7gMbI4mqT2_tHGznfafOHDRqHS4ue2rdrCwG_jH1I0oqDiTFEh0KRUD0X1aK/s1600/pinkt.png"/></a>

<a href="http://feeds.feedburner.com/BeingBloggers" title="Rss Subscribe"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJAn1qkYn9YeN9pcWRzG0bDJFy3YtOI-UT0FuA9pitBqyyEmxQk9KVbJ-Vz5Lr-DcUSKBigVZta6mUUbISKbTraPdSgl-aIrchpMsW32lXatSxyoOY-uKJCUvX4_TXTFctEHuDjILkrvrm/s1600/pinkr+copy.png"/></a>

<a href="Youtube Address Url" title="YouTube Subscribe"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVWhoLhMgdlgriAo-Kk9ldhJfNghXxRU0OvPktyNHIv9YOoqguVEF6LRi15ZL2TgRpb4tDOpwlOlQQJ_nAGtwwVYi7kvH4RWim-vosVLC4kq858C3uJQlKd6lhr2XjP-zi1kkvAaGB918m/s1600/pinky.png"/></a>

<a href="Instagram Address" title="Instagram Follow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjokrtWl5lpbM0nKJ59bo2nWkdUgUdtN9H9xftyR-ZJjo0BWQpCFxYVWHeNBGEW69wrNPlgMcNauVcG0YgTrVCh_CEViGLfpWacfp7kn6qsR2XKrdKjq4kkZsP-XaHB2Cd4vHSn4Vu38DEl/s1600/pinki.png"/></a>

<a href="Pininterst Address" title="Pininterest Follow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUBNR3F6aUPo5-wR9b3jQdbbjUJRcrnKAWqbesaamflrdVOgIoPN_GEB3jw3VCAOcD6pojfQyt3SnOfMAEdzDJXsoCp-f7K0HCjhGaiMToazVLAu3bOGHETufb1FpI7zXWxWjpjwgHTVuU/s1600/pinkp.png"/></a>

<a href="Linkedin Address" title="Linkedin Follow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg86g-mkSjUOyX29e6Ndt0MIANNCz3omk_U7Yb3uqnS5u52h51AXn585ddPiIiIfzzqNPzVdukyFKVJ9nSAPStMhDQRTejclf1ZnDvU8zFPZX77Sx8SbormOpT8nHmSTtYJI5QFZpNkTUAv/s1600/pinkl.png"/></a>

</div>
</div>
</center>
</b:if></b:if>

Now Follow these steps:

Step 1: Go back to blogger dashboard.

Step 2: Select Template option.

Step 3: Click on Customize button.

Step 4: Select Advanced option from the list.

Step 5: Select Add CSS option from the list(the last option in list).

Step 6: Paste one of following codes(depending on the look you want) in the Css text area and click on Apply To Blog button.

PREVIEW

how-to-add-all-in-one-social-connect-subscription-box-in-blogger-post

CODE

#bb-sub-widget{

width:460px;

height:270px;

background:black;

margin: 0 auto;

padding: 15px;

margin:20px;

border-radius:5px;

}

#bb-sub-widget h2 {

color:#ff66cc;

text-align:center;

font-variant: small-caps;

font-family:verdana;

font-size:25px;

}

#bb-sub-widget h3 {

color:white;

font-style:italic;

text-align:center;

font-size:20px;

}

.email-input{

width:300px;

border-radius:4px;

font-style:italic;

color:#ff66cc;

border:none;

padding:7px;

float:left;

margin-top:4px;

margin-left:15px;

}

.signup{

background:#ff66cc;

color:white;

border:none;

padding:10px;

cursor: pointer;

font-family:verdana, arial, sans-serif;

border-radius:1px;

font-size:13px;

}

.signup:hover{

background: #ff6699;

}

.bb-social

{

text-align:center;

margin-top:25px;

}

.bb-social img

{

padding:0px;

margin:0px;

background:black;

border:none;

}

.bb-social img:hover

{

opacity:0.8;

filter:Alpha(opacity=0.8);

}

PREVIEW

add-designer-email-subscription-widget-to-blogger-blog

CODE

#bb-sub-widget{
width:460px;
height:270px;
border:2px solid #ff66cc;
background:white;
margin: 0 auto;
padding: 15px;
margin:20px;
border-radius:5px;
}
#bb-sub-widget h2 {
color:#ff66cc;
text-align:center;
font-variant: small-caps;
font-family:verdana;
font-size:25px;
}
#bb-sub-widget h3 {
color:black;
font-style:italic;
text-align:center;
font-size:20px;
}
.email-input{
width:300px;
border-radius:4px;
font-style:italic;
color:#ff66cc;
border:none;
padding:7px;
float:left;
margin-top:4px;
margin-left:15px;
border:1px solid black;
}
.signup{
background:#ff66cc;
color:white;
border:none;
padding:10px;
cursor: pointer;
font-family:verdana, arial, sans-serif;
border-radius:1px;
font-size:13px;
}
.signup:hover{
background: #ff6699;
}
.bb-social
{
text-align:center;
margin-top:25px;
}
.bb-social img
{
padding:0px;
margin:0px;
background:white;
border:none;
}
.bb-social img:hover
{
opacity:0.8;
filter:Alpha(opacity=0.8);

}

This was all about how you can add an email subscription widget below every post in your blogger blog. How did you like this widget? Give your opinion in the comments.
♥ Keep Blogging ♥

ALSO SEE:
Cute Custom Popular Post Widgets For Blogger Blog
Cute Custom Labels Widget For Blogger Blog
Customize Read More Link In Blogger Blog
5 Cute Horizontal Bars For Blogger Blog
How To Add Facebook Like Box To Mobile View Of Blogger