Add Stylish Email Subscriber For Blogger

Home » Blogging » Add Stylish Email Subscriber For Blogger

Add Stylish Email Subscriber For Blogger

Friday, 29 November 2013 1 comment

As every people know that every one have a facebook account and others social networking accounts. An

d people use that for the ease. When ever any one visits any blog and he likes that and want to share that post So he will found for the social networking buttons, so he/ she can easily can share your post. So just follow the below steps and add a stylish social subcription box.
Steps:
1. Go to your Blogger layout from the dashboard. 2. Click on ADD A GADGET. 3. Select html/javaScript. 4. Now add the following code.

<!—START COPY FROM HERE-->

<style>

.touchme a {

display:block;

height:50px;

width:50px;

padding:0 4px;

float:left;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNWo7Ox_aqGVhIEE0_tu5WXSjL0ZzlDp2edzKY7Wo4IRRjObyPvv26vUGyRYkLcH1Qr07TuiPtt3Kee-BiNlsTkNIbVR_Ic7Jyb4yGpsJ809Kz-NXd_jkex9oV3pcLDNhL3hCTyf0egz7c/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://feedburner.google.com/fb/a/mailverify?uri=mybloggerpasion" rel='external nofollow' target='_blank'></a>



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



<a class='facebook' href=" http://www.facebook.com/SoftwaresRockers

" rel='external nofollow' target='_blank'></a>



<a class='twitter' href="https://twitter.com/mybloggerpasion" rel='external nofollow' target='_blank' ></a>

</div>

<style>

.tk-email{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgVgVZ9oEbdf48xtIsP_-ph7_FxcyFd4ZTL8wSdn0BOydIiXLwlk1UcgdusoKf6mbnqmj-_20jOtddlL_dcD6Y5r7rUw93i6_sl8iTYgpkk1ryXPAILcx_9dY0Vp7XbPlQZvq4ncSA6KS/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?uri=mybloggerpasion" 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 == "") {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="Techkgp" name="uri"/><input type="hidden" name="loc" value="en_US"/>

<input class="tk-emailsubmit" value="Submit" type="submit" />

<a href="www.tricksmode.com" rel="dofollow"><font size="0.1" color="#C0C0C0">facebook tricks</font></a>

</form>

</div>
<!—STOP COPY HERE-->