Mintbar is our new notification/subscribe bar for blogs and websites designed to increase conversation with your blog or website. The idea of Mintbar was inspired from Hellobar and Viperbar the two popular notification bars that quite popular in the web. Let me put this to you; Mintbar was developed to give you an idea on how the notification bar and subscribe bars works. If you have a look at Hellobar or the Viperbar you can see their logo appear on the bar which looks odd sometime. So Mintbar is open source, you are free to do any changes on the script to make it look lovable.
Before getting into detail, please understand Mintbar is not a WordPress plugin or neither specified for any platform. The tutorial instructed here can be applied to most of the Website or blog platform that are currently used.
The HTML
This is the basic HTML layout to describe its functions. We have two version. One is to highlight your trending post or whatever and the second one for the email subscribe box using Feedburner. The demonstrated code here is for the notification bar, so if you to use the subscribe box bar, you can get the source from the download link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Mint bar - Email Subscription / Trending Post bar</title>
<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>
</head>
<body>
<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>
</body>
</html>
The CSS
This part contains the red ribbon background used for bar and other required codes to style up the Mintbar.
#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;
}
Script.js
Now finally I have used jQuery to make it fully function. The script is light weight, so you don’t need to worry about the loading time. For the bounce effect I have used jQuery easing to make it look pretty on your blog or website.
// If you want to change those, just replace the easeOutBounce with your preferred effect from this list.
// To change animation duration change the duration value which is in milliseconds.
// Wrap the code within <script type='text/javascript'> and </script> (for beginners)
<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>
So with these three parts, the Mintbar comes to live. I have attached all the codes and respective images in the download folder. The installation procedure is most probably similar with all the platform.
For instruction on how to use this for WordPress or Blogger, read the instruction from here
For Mint Subscribe Bar
We also said Mintbar can be used as subscription bar. To do that you need to add the HTML code mentioned below instead of the notification settings.
Watch the live demo here
<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>
<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!"/>
<input type="hidden" name="uri" value="bloggermint"/>
<input type="hidden" value="en_US" name="loc"/>
<input type="submit" value="Subscribe" class='go'/>
</form>
<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>
If you are looking to use this for WordPress and Blogger kindly read the instruction from here
