Nice Looking Subscribe Box Below Header For Blogger

5/27/2013 CSS , Widgets 0 Comments

Blogger had already released long ago its subscribe box but it did not look good enough so today i will post an awesome subscribe box with css for blogger.

Install It Into Blogger

<style>
      .tan23{
        width:100%;
        background:#000;
    background-image:url(&#39;http://octavus.themewoodmen.com/wp-content/themes/octavus/theme/assets/img/icons-pattern.png&#39;);
        min-height:100px;
     
      }
      .tan24 {
        width: 960px;
margin: 0 auto;
        text-align:center;
        padding-top:8px;
        padding-bottom:8px;
      }
   
      .tan1 {
        width:100%;
        background:#000;
    background-image:url(&#39;http://octavus.themewoodmen.com/wp-content/themes/octavus/theme/assets/img/icons-pattern.png&#39;);
        min-height:100px;
        height:250px;
      }
      .tan2 {
        width: 960px;
margin: 0 auto;
        padding-top:15px;
        padding-bottom:15px;
        padding-left:100px;
      }
      .tan3 {
       float: left;
width: 425px;
padding-top: 15px;
        margin-right:10px;
     
}
      }
      .tan3 h1{
        font-size:36px;
        color:#fff;
      }
      .tan4
      {
        float: right;
width: 480px;
padding-right: 15px;
text-align: justify;
      }
   
    </style>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='tan1'>
<div class='tan2'>
  <div class='tan3'>
    <h1><font color='white'><left><u>Join 150+ subscribers</u></left></font></h1>
    <p><font color='white' size='4'> Hey you there ! Wanna experience some awesome tutorials ? This is just the place you are looking for.Just signup and enjoy all our services for free.And people we hate spam as much as you do ! So dude what are you waiting for .  Sign Up Today ! </font></p>
  </div>
    <div class='tan3'>
   
      <style type='text/css'>#sidebar-subscribe-box{border-radius: 8px;margin-left:30px;background:url() repeat scroll 0 0 transparent;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{box-shadow: 0 0 0 10px rgba(255,255,255,.25);border-radius: 8px;background: #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhewZA2ydPPgRO_cW2JzsB6kokuZfegsHBtnS_kLECjXwm0VBgF6jMzVwkypo9tKaerMnh3eAnzVYe_QN2B474oBGwkiH9nc_0D2CdZyLtYD-SlgfZ1pSYceGy9YXelju3xG5DbNhICJDFC/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#d25503;border:1px solid #d25503;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#d25503}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjXv4fay-HeT4aHH1aEiKoXm0HsFn2rrKGK5YkvHewTS1chFQXk0BnWvakBOfhRqiAwbT0KSyjgdoU1Uhn8QqNlcUhz65V5z1UqQTnTk_5UyptR6HLRLBjAqfqJ6vGMy1CbXUyz64iXpef/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
      <div id='sidebar-subscribe-box'><div class='sidebar-subscribe-box-wrapper'><p>Subscribe to our email newsletter and receive updates right in your inbox.</p><div class='sidebar-subscribe-box-form'><form action='http://feedburner.google.com/fb/a/mailverify?uri=bloggeraxe' class='sidebar-subscribe-box-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bloggeraxe&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input name='uri' type='hidden' value='bloggeraxe'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='sidebar-subscribe-box-email-field' name='email' placeholder='Enter your email address :)'/><input class='sidebar-subscribe-box-email-button' title='' type='submit' value='Subscribe Now !'/></form></div></div>
        <br/><br/>
   
     
   
      </div>
   
   
</div>
  </div>
  </div>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
   
    <div class='tan23'>
     <div class='tan24'>
       <center>
YOUR 728X90 AD BANNER
       </center>
      </div>
        </div>
   
    </b:if> 

•  Make Changes