Closeable jQuery Floating Message Box For Bloggers

I very eagerly waiting for to make this available for blogger, Previously i make jQuery Tabber Widget For Blogger now in this article i will show how to display the jQuery Message Box

»I think no need to mention(First Download the Template)

See Demo

Step 1:Login to Blogger dashboard » layout » Edit HTML

Find(CTRL+F) ]]</b:skin>tag.

Now copy and paste below code just before ]]</b:skin> this.

/*----------Begin TechTasks Message Box CSS--------------*/

#TT_float_box_top {
background: none repeat scroll 0 0 #E1F0FF;
border: 1px solid #0080FF;
border-radius: 0 0 20px 20px;
font-weight: bold;
padding: 1px;
position: absolute;
text-align: center;
top: 0;
width: 99%;
left: 5px;
right: 5px;
}
#TT_close_box_t
{
float:right;
cursor:pointer;
padding: 10px 10px 0px 0px;
}
/*----------End TechTasks Message Box CSS--------------*/

Step 2:Find </head> .

Cope and paste the below just before </head> this.

<script src='http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js' type='text/javascript'/>
<script type='text/javascript'>
/*----------Start TechTasks Message Box Script--------------*/
$(document).ready(function()
{
$(window).scroll(function()
{
$('#TT_float_box_top').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});
$('#TT_close_box_t').click(function()
{
$('#TT_float_box_top').animate({ top:"+=15px",opacity:0 }, "slow");
});
});
/*----------End TechTasks Message Box Script--------------*/
</script>

Step 3:Finally find the </body>

Now copy and paste below code just above the </body>.

<div id='TT_float_box_top'>
Your Msg Goes Here
<img id='TT_close_box_t' src='https://lh5.googleusercontent.com/_-A4vw5BwqxA/TYRgmJlU71I/AAAAAAAAFaE/_bh9kfx5oT4/s288/DeleteRed.png'/>
</div>

Now See The jQuery Message Box in Your Blog

»Finally save the Template and see the preview

Feel Free to ask any queries about this...