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 .....
I’m not that much of
ReplyDeletea online reader to be honest but your sites really nice, keep
it up! I'll go
ahead and bookmark your website to come back down the road. Cheers
Also visit my web page - Injury attorney
Hello! I was interested to
ReplyDeleteknow if setting up a blog site such your own: http:
//www.blogger.com/comment.g?blogID=3470101293246937483&postID=8608995063346643190 is hard to do for
inexperienced people? I have been hoping to
develop my own blog for a while now but have been turned
off
because I've always assumed it required tons
of work. What do you think? Bless you
my webpage :: Go to my website
I'm
ReplyDeletestarting a new internet blog directory and was
wanting to know if I can submit your blog? I'm hoping
to increase my directory slowly by hand so that it
retains quality. I'll make sure
and put your blog in the correct category and I'll
also use, "Blogger: BLOG CODE HTML" as your anchor text. Please make sure to let
me know if this is
acceptable with you by e-mailing me at: valerie_dennis@zoho.
com.
Thanks alot :)
Here is my blog post ... Please visit my site