How to add stylish subscription box into blogger sidebar

Adding cool subscription box into blogger sidebar is best way to increase your social presence and incredibly increase your readers.Every blogger should use social networks to increase their social presence with different social websites like facebook, twitter, google+, linked in etc.

This stylish widget contains all these social website icons, rss feeds etc. It help fellow readers to follow you on these social websites or get update via feeds.

How to add this subscription box into blogger sidebar

Step 1. Go to layout section in blogger.
Step 2. Add new widget and select html/javascript.
Step 3. Paste following codes into this widget and press save.

<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'>

<a class='rss' href="http://feeds.feedburner.com/bwidgets4all" rel='external nofollow' target='_blank'></a>

<a class='googleplus' href="https://plus.google.com/113237313205057064054" rel='external nofollow' target='_blank'></a>

<a class='facebook' href=" http://www.facebook.com/bwidgets4all
" rel='external nofollow' target='_blank'></a>

<a class='twitter' href="https://www.twitter.com/bwidgets4all" rel='external nofollow' target='_blank' ></a>
</div>
<style>
.tk-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpy8F7nYbSDRn6igCIUB6zBH13fCFIe8Kcd2vJJwBCutWv8mGBT9ku60-M8V-ViIhKSg2XUQadcgLk7sUkwRfLDf0ZoVOP6GdC7UeAEkQNBTtEQBGx2EZB5WAAHMSdMS1Kf9dr9tHPxPJl/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=bwidgets4all', '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="bwidgets4all" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="tk-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Step 4. Replace bwidgets4all with your social profile and change google + id.
If you like this short widget then pl consider sharing with friends.

Kindly Bookmark this Post using your favorite Bookmarking service: