See below for setup instruction for WordPress and Blogger.
1. Search for ]]></b:skin> and paste the following CSS code immediately before it.
#mintbar {
border-bottom:3px solid #ECF1EF;
background:url('bg1.png') repeat-x;
font-size:14px;
font-family: Arial, Helvetica, Sans-serif;
color:#FFF;
padding:10px 0px;
position:relative;
top:0;
left:0;
z-index:2000;
width:100%;
text-align:center;
height:20px;
}
#mintbar a {
color:#FFF;
text-decoration:none;
}
#closebtn {
background:url('close.png') top no-repeat;
border:none;
margin-left:15px;
position:absolute;
cursor:pointer;
}
#mint {
cursor:pointer;
position: relative;
z-index: 1000;
}
/* Optional for subscribe box */
.mintbar {
margin: 0pt auto;
width: 600px;
}
.mintbar form {
float: left;
margin: 1px 10px 0;
width:275px;
}
.mintbar .sbox {
border: 1px solid #555555;
border-radius: 5px 5px 5px 5px;
color: #888888;
float: left;
margin: -2px 0 0;
padding: 3px;
width: 155px;
}
.mintbar .go {
float: left;
margin: -2px 0 0 10px;
height: 24px;
}
.mintbar #closebtn {
margin-left: -20px;
}
2. Add the following jQuery scripts before closing </head> tag.
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<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>
3. Add the HTML code immediately after opening <body> tag.
<div id="mintbar">
<div style="text-align:center;margin-top:3px;">
<b><a href='http://www.bloggermint.com/2011/06/how-to-create-modal-subscribe-box-using-jquery/'>How To Create Modal Subscribe Box Using jQuery</a></b>
<input type='button' id='closebtn' />
</div>
</div>
<div id="mint" style="display:none;position:absolute;top:0;right:10px;">
<img src="ribbon1.png" />
<input type='hidden' id='mint' />
</div>
4. Done!
1. Unzip the file and upload it to your server.
2. Add the following code before closing </head> tag in header.php.
<link media="screen" rel="stylesheet" href="bar.css" />
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<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>
3. Add the HTML code immediately after opening <body> tag.
<div id="mintbar">
<div style="text-align:center;margin-top:3px;">
<b><a href='http://www.bloggermint.com/2011/06/how-to-create-modal-subscribe-box-using-jquery/'>How To Create Modal Subscribe Box Using jQuery</a></b>
<input type='button' id='closebtn' />
</div>
</div>
<div id="mint" style="display:none;position:absolute;top:0;right:10px;">
<img src="ribbon1.png" />
<input type='hidden' id='mint' />
</div>
4. Done!