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 == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" 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
i dont have feedburner, is there anyway tu remove it?
ReplyDeleteSo You Make A Account On feedBurner It's Very Easy.
Delete