Here comes again a cool subscription box/widget that will never take much of your blog space. Follow the instruction, do the necessary changes before you install.
#1— Paste the bellow CSS code right after <head> tag in your blogger template
follow the instruction in #3)
#3 — Customization
Replace the following with your own please
Happy blogging! .............don't forget to drop a comment if it works
#1— Paste the bellow CSS code right after <head> tag in your blogger template
<style type='text/css'>#2 — Now search for <data:post.body/> and paste the bellow code after it (before that make sure you
.sub-box{
width: 600px;
background: #fff;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 0px;
}
.sub-box:hover{
border:2px solid #511111;
}
.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;}
.followlinks ul li.otrss{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaNwAOUyqU30sUhZ8J5tY35ZkIT8tA-MEZP8N74cXgZFl5ujNmfBpCsd7BxCsY3xM3rdghlkd3iPQaE-KIwoWSgZ42kGdJlQnMyFK6uXdt0TY9hc3fVanQyTlUPCXTv7Xb7TTwq5Yeg5Y/s1600/bloggertrix-rss-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8dCIJ0rlfhMJcB0tdzeUZXVAeeDuFJ6ejwj4lGj3DjAnDNB4kur3zEb2nrmN5yHTJ3wEhG8R6epC6ltFH-sHSarVnawQgTGLWd_PTFMx6BYLGT6IopcgLX10I0O2hyphenhyphenY3AYT1UUP_PBLo/s1600/bloggertrix-google-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimQqia2GbjZh_gpO7NRNYgfUT0rx_NpSVk3seQ54jnRB9B4SWd_ZQXL3AshIQrsvxbQq3kktaqO9z5afXsfhHcwOS6gOP6cj1htTC-upHneQ-ymcjo7v12x-e1BIbsLI8V3P2OWHILgLU/s1600/bloggertrix-twitter-icon.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhczeO_FcOOj-TTC883xPLl4Z7EeCVpIeWeb5DahjsLEV4kUCMDWmCgqgFMXyzI0RUeTnqFM0zNBwG8vTkLj7JpLw5EVPbuuFHKO0T85CV6xBPANSrsBRSEmaRJOqJLMqfFmHmDBa_mBk4/s1600/bloggertrix-facebook-icon.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/AVvXsEgAlAdLqM1Cmnk_V-TjSEGAETsj5B-ykHsz6xKsQ1nCOuvWVgchjBDHNpr71Jph0S1vYvgd8Aopv0B0fg4yWRnTTBWzxnRYL2lwH2IVIDHiDMUQK2WLhHtk1hKTAYnyZ16M9RfXaJipJVH9/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: 550px;
}
.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>
follow the instruction in #3)
<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Updates and Like us on your Social networking site</h1>
<ul>
<li class='otrss'><a href='http://feeds.feedburner.com/Bloggertrix' target='_blank'>RSS</a></li>
<li class='otgoogleplus'><a href='http://plus.google.com/107955298793879607964' target='_blank'>Google+</a></li>
<li class='ottwitter'><a href='http://twitter.com/bloggertrix' target='_blank'>Twitter</a></li>
<li class='otfacebook'><a href='https://www.facebook.com/bloggertrix' target='_blank'>Facebook</a></li>
</ul>
</div>
<br/>
<div style='text-align: left; display: inline-block;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Everfreetech',
'popupwindow',
'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogggertrix'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailtext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='sub-button' title='' type='submit' value='SignUp'/>
</form></div></div>
#3 — Customization
Replace the following with your own please
- http://feeds.feedburner.com/BrilliantInfoVille
- http://plus.google.com/107955298793879607964
- http://twitter.com/ikev61
- https://www.facebook.com/brilliantinfo
Happy blogging! .............don't forget to drop a comment if it works
Comments
Post a Comment