All PC Games And Softwares

Add Stylish Email Subscriber For Blogger


social subscription box for blogger

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'>
<!--RSS-->
<a class='rss' href="http://feedburner.google.com/fb/a/mailverify?uri=mybloggerpasion" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/116038191764951410585" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href=" http://www.facebook.com/SoftwaresRockers
" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<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 == &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" />
<a href="www.tricksmode.com" rel="dofollow"><font size="0.1" color="#C0C0C0">facebook tricks</font></a>
</form>
</div>
<!—STOP COPY HERE-->

5. now change my url with yours and save

1 comments: