Instructions for Blogger
First you go to login your blogger accountNext go to Template.
And then Edit HTML after the following steps do this...
1. Search for
]]></b:skin> and paste the following CSS code immediately before it.
#mintbar {<br /> border-bottom:3px solid #ECF1EF;<br /> background:url('bg1.png') repeat-x;<br /> font-size:14px;<br /> font-family: Arial, Helvetica, Sans-serif;<br /> color:#FFF;<br /> padding:10px 0px;<br /> position:relative;<br /> top:0;<br /> left:0;<br /> z-index:2000;<br /> width:100%;<br /> text-align:center;<br /> height:20px;<br /> }<br /> #mintbar a {<br /> color:#FFF;<br /> text-decoration:none;<br /> }<br /> #closebtn {<br /> background:url('close.png') top no-repeat;<br /> border:none;<br /> margin-left:15px;<br /> position:absolute;<br /> cursor:pointer; <br /> }<br /> #mint {<br /> cursor:pointer;<br /> position: relative;<br /> z-index: 1000;<br /> }<br /> <br /> /* Optional for subscribe box */<br /> <br /> .mintbar {<br /> margin: 0pt auto; <br /> width: 600px; <br /> }<br /> .mintbar form {<br /> float: left;<br /> margin: 1px 10px 0;<br /> width:275px;<br /> }<br /> .mintbar .sbox {<br /> border: 1px solid #555555;<br /> border-radius: 5px 5px 5px 5px;<br /> color: #888888;<br /> float: left;<br /> margin: -2px 0 0;<br /> padding: 3px;<br /> width: 155px;<br /> }<br /> .mintbar .go {<br /> float: left;<br /> margin: -2px 0 0 10px;<br /> height: 24px;<br /> }<br /> .mintbar #closebtn {<br /> margin-left: -20px;<br /> }
2. Add the following jQuery scripts before closing </head> tag
<script src="http://code.jquery.com/jquery-1.5.js"></script><br /> <script type="text/javascript" src="jquery.easing.1.3.js"></script><br /> <script type='text/javascript'> $(document).ready(function() { function anim(duration){ $('#mint').animate( {height: 'toggle'}, {duration: duration, specialEasing: {height: 'easeOutBounce'}} ); } $('#closebtn').click(function() { $('#mintbar').slideUp(); anim(800); }); $('#mint').click(function() { anim(500); $('#mintbar').slideDown('slow','easeOutBounce'); }); }); </script>
<body> tag.<div id="mintbar"> <div class="mintbar"> <span style="float: left; margin: 3px 0pt 0pt; font-weight: bold;">Get the latest updates from us for free</span> <br /> <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?bloggermint', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"> <input type="email" name="email" class="sbox" placeholder="Your email address here!"/><br /> <input type="hidden" name="uri" value="bloggermint"/><br /> <input type="hidden" value="en_US" name="loc"/><br /> <input type="submit" value="Subscribe" class='go'/><br /> </form> <input type='button' id='closebtn' /><br /> </div></div><div id="mint" style="display:none;position:absolute;top:0;right:10px;"> <img src="ribbon1.png" /><br /> <input type='hidden' id='mint' /><br /> </div>
4. Done!
LIVE Demo page......click here!
good luck .....
