-->

Thursday, 9 May 2013

2 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/AVvXsEgFbxZZty5EH0UkHknJH58D0FwqjGcsMaTF9fX5xZCWyZVLwrK-OjCv41jyyyNYCS8YpTWQ3O2RXeXex7cprK1qAQTfTz5DtDbtaknLASdwW0LuaHGnLdNOYIL4znx4f__UdFOOH0JqmvvM/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/114267355093471812997" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href=" http://www.facebook.com/www.showmedreams.tk" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://www.twitter.com/samarthlord" rel='external nofollow' target='_blank' ></a>
</div>
<style>
.tk-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPPFdfIZgiTu_cwa6QjsYlW10hiPmZq9YZcZSlHJRRQvuR18fmhLBnGMnp2z11etlsP6lElDz_7CA3RP_vK7-2JoLjJHH-kOjaVfTJojnCWQdW_armSSKJuy5IiRdrjEtnDTtcpTSy8Mfq/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/114267355093471812997 With Your Google Plus Account

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

Change: https://https://www.twitter.com/samarthlord 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
Share this article :
Samarth Agarwal (Admin)
Posted By: Samarth Agarwal

Samarth Agarwal is the owner and founder of showmedreams.blogspot.com. I love to blogging,I like to learn and share technical hacking/security tips with you.

2 comments:

  1. i dont have feedburner, is there anyway tu remove it?

    ReplyDelete
    Replies
    1. So You Make A Account On feedBurner It's Very Easy.

      Delete

Before Publishing Your Comment Please Click On Subscribe Button To Get Comments Update Direct Your Email

Subscribe via email

Subscribe via Email
 

Hi! Myself Samarth Agarwal (Pro Blogger and an addicted Web Developer)
1st of All I would like to thanks to all Followers and our lovely Visiters... Read More

Make Dashing Your Blog Copyright © 2016- All Rights Reserved
Designed by: Samarth Agarwal | Powered by: Showmedreams(SMD)