Saturday, March 19, 2011

Closeable jQuery Floating Message Box For Bloggers

4 comments 3/19/2011
Sign up to receive our site updates!
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)

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;
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='' type='text/javascript'/>
<script type='text/javascript'>
/*----------Start TechTasks Message Box Script--------------*/
$('#TT_float_box_top').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
$('#TT_float_box_top').animate({ top:"+=15px",opacity:0 }, "slow");
/*----------End TechTasks Message Box 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=''/>

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...
Your Ad Here


FRTJ on April 22, 2011 at 4:03 PM said... [Reply]

This post is very useful for me.But i want it to be shown only when the visitor comes to my site for the first time.What changes should i make?

Rajesh on April 24, 2011 at 12:35 PM said... [Reply]

@FRTJ Thanks... I am trying to develop a popup Message Box for a session,Soon i ll be make available to Blogger

Bakhtiyar Masbek on July 3, 2011 at 2:44 PM said... [Reply]

Nice post

Daudara on August 31, 2011 at 2:49 PM said... [Reply]

How can i make the box to show only when i clicked a link or something.

Respects for your's Questions & Opinions

  • Friends

    Recent Posts

    Copyright 2008 All Rights Reserved Tech Tasks Template by Rajesh Kumar Chekuri