To add this subscription box to your blog just follow below steps-
- Go to blogger dashboard.
- Now click on layout tab.
- Now add html/javascript and paste below code there and save it.
<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Updates</h1>
<ul>
<li class='otrss'><a target='_blank' href='http://feeds.feedburner.com/lordhtml'>RSS</a></li>
<li class='otgoogleplus'><a target='_blank' href='Google Plus Profile URL'>Google+</a></li>
<li class='ottwitter'><a target='_blank' href='http://twitter.com/lordhtml'>Twitter</a></li>
<li class='otfacebook'><a target='_blank' href='https://www.facebook.com/lordhtml'>Facebook</a></li>
</ul>
</div>
<br />
<div style="text-align: left; display: inline-block;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=lordhtml', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">
<input type="hidden" value="lordhtml" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" onblur="if (this.value == "") {this.value = "enter your email...";}" onfocus="if (this.value == "enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="SignUp" title='' alt='' />
</form>
</div>
</div>
<style>
.sub-box{
background: #fff;
width: 270px;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border-style:dashed; 2px solid: #389af2;
}
.followlinks h1{
font-family:Cabin Condensed;
font-weight: bold;
color: #000;
padding: 0px 0px 2px 40px;;
font-size:17px;
}
.followlinks ul{
font-family:Cabin Condensed;
font-weight: bold;
}
.followlinks ul li{
float:left;
width:90px;
padding-left:40px;
margin:0 0 0 5px !important;
line-height:35px !important;
}
.followlinks ul li a{
font-size:20px !important;
text-decoration:none;
font-weight:normal;
color:#0068b5;
}
.followlinks ul li a:hover{
color:#000;
}
.followlinks ul li.otrss{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqXZQ4Fh-s-7LYDLbMCLWEXtVSU_DnvvIM3Hp4v_gACXRSkKvqGKrv_B9paX4ZbtY3YEACQ-MkDIp7Kpq91LSdmMCwQA5gQVl4ajBB5tHiaYcobqTQYzWKhO2U1pJKXNJpvKyOqU2vSY3_/s1600/rss-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLG77oF0Y0MTXSSfIxXyog4JjJBAQDWCk4xJdhwFCTQHWpIvuzIrfmGRNOr2wwTtb7uUOAN9nJoHkk1mbeHJrS36Q-dBJZ-IcqExbFERUKQHYh03K9yuNOsWOnde40dpOIV9zrc9CbS7pE/s1600/googleplus-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTsvG3pih0YXQJ2moqCKd7zaIi7RBUtZUkNjTjUpiZnrA3Lwq2Wsars5hOVvBhE-AVKI_rIyw9ZpkZeTdANrQjQSkz9fzD-R5qYhU5ya-7FnWJsFfLLy5Ojf0OzXiYr_O9z-I1qdPve3k9/s1600/twitter-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAbp-cZpQ7VlAd48-8KHTGs4gOtQAH0dZ1SkljhYpCsWX_UzMeLZy7pt7_-Gx5CnvvGpmdQzWaPAnkGgFRn26vWwUT80f1LL1ZNLh9JCh6rh796hMisRqX9ti7DLHQmXoPWKBAvUMXyzEf/s1600/facebook-ot.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUboFMfb0yjXdGbHz66IkaQzRyymH1djQb7TIdnxjJDo2NdDp79gITnVGsDu2Cqmyj60UCwhdHnoS6vdiKl5W5OfXCIXUnyuhidUyrluhpKWca_opsesUsAkmzExoq3A8qGGu1C6lx-4Y0/s1600/ot-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 142px;
}
.emailtext:focus{
outline: none;
}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
}</style>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Cabin+Condensed::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
Customize-
Replace http://feeds.feedburner.com/lordhtml with your Feedburner link. in red
Replace http://twitter.com/lordhtml with your twitter link.
Replace http://www.facebook.com/lordhtml with your facebook page link.
Replace lordhtml with your feedburner name in two terms.
0 comments:
Post a Comment