Feedburner Subscribe Box & Social Share to Blogger

Social Networking sites
Social Networking sites Google plus, Facebook, Twitter, and RSS which does provides quality traffic to websites without building Backlinks or spending time on Search Engine Optimization. It is necessary to socialize your blog on different social networking website. This widget contains links of your Facebook Fan page; Google+ page and twitter follow button, RSS and subscription form that will increase the number of Email subscribers of your blog. When you hover your mouse over these icons the icons change the color and providing a beautiful hover effects. This subscribe box has attractive and awesome look, so your blog reader's will attract to subscribe, sure. You can add this subscribe box to blogger in your sidebar very easily and simple.

How To Add Feedburner Subscribe Box & Social Share to Blogger 

Go to Blogger Dashboard --> Layout --> Page Elements.
Click on Add a Gadget then select HTML/JavaScript Widget.
Copy the below Code and paste it inside the widget.

<style>
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://lh5.googleusercontent.com/-FIiElB5jJ3E/UJUoV7NgFUI/AAAAAAAAAx4/Oh27DfxWa0g/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/techkgp" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/ 109641843571834476678" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href=" http://www.facebook.com/pages/Techkgp/239231366210772
" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://www.twitter.com/techkgp" rel='external nofollow' target='_blank' ></a>
</div>
<style>
.tk-email{
background:url(https://lh4.googleusercontent.com/-cgxNZKF5kNg/UPJb3vrrdGI/AAAAAAAAAC4/cA6VRFl-Vn0/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=techkgp', '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="Techkgp" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="tk-emailsubmit" value="Submit" type="submit" />
</form>
</div>

DEMO
Make these changes

Replace http://feeds.feedburner.com/techkgp with your Feed burner link.
Replace https://plus.google.com/ 109641843571834476678 with your Google+ URL
Replace http://www.facebook.com/pages/Techkgp/239231366210772 with your Facebook URL
Replace https://www.twitter.com/techkgp with your Twitter Profile URL
Replace http://feedburner.google.com/fb/a/mailverify?uri=techkgp with your Feedburner Email Feed link
Replace Techkgp with your feed title.
Save the widget and you're done.

That's all
Enjoy………. 

1 comment:

  1. This comment has been removed by a blog administrator.

    ReplyDelete