How To Customize Feedburner Email Subscription Box With Sharing

How To Customize Feedburner Email Subscription Box With Sharing :

You must have noticed our Google Feedburner email subscription form along with social icons and and a counter. It looks very professional and matches with our custom theme.The default Google Feedburner though does the basic work very well, that is helps your visitors to subscribe to your RSS feed via email; but it really look like a vintage widget.So Today I am Gonna Show You How To Customize Feedburner Box.Follow My Steps
1->Open Your Blogger Blogger Account

2->Click On Layout

3->Click On Add Gadget

4->Select HTML/JAVASCRIPT

5->Paste The Following Code

<style>
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG2i-113dseAeVz5O4u8XeAV4iO458YWNBpoEUK_bbfPh0kqcO9zlRXj1Baut8uhZXm31DYE1X5GzXwAQ39df35Q75swaT2QZmA4zl6WKxNZfmV5-8_-Ey4dRcOduK_asyiOzE07UxpGJ_/s454/Sharing%2520Touch%2520Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="http://feeds.feedburner.com/showmedreams" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/107717878539176844671" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href=" http://www.facebook.com/bloggerdashingtricks" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://www.twitter.com/bilalalyansoft" rel='external nofollow' target='_blank' ></a>
</div>
<style>
.tk-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh39sfQycBDALWo9Ivp2WBv5fMHl1XFztDfzsajHHbvrbblLpaGoIyu9zKblcfDtyrhwUj5fzhpHIb727SqiEvqt3e1IOSMwynEJ8-bXJKFNJpEpyRL8ZgcX2o53Xrqy4qW13xzQvUCEOek/s48/email%2520%25283%2529.png) no-repeat 0px 5px ;
width:300px;
padding:0px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 1px 0;
color:#686B6C;
}
.tk-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.tk-emailsubmit:hover{
background:#3d87d0;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:150px;
color:#666;}
</style>
<div class="tk-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=showmedreams', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="Showmedreams" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="tk-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Customization

Change: https://feeds.feedburner.com/showmedreams With Your Feedburner Rss Feed Name

Change: https://plus.google.com/107717878539176844671 With Your Google Plus Account

Change: https://www.facebook.com/bloggerdashingtricks With Your Facebook Page User Name

Change: https://twitter.com/bilalalyansoft With Your Twitter Account User Name

Change: showmedreams With Your FeedBurner Rss Feed Name

Change: Showmedreams With Your FeedBurner Rss Feed Name

6-> Save Template

Yipeee........

Please Leave Your Question And Comment Below