Floating Toolbar

Step 1:JS

Write this code inside the header tag

<script src=”<?php bloginfo(‘template_url’); ?>/js/jquery.js” type=”text/javascript”></script>

JS code to trigger the toolbar.

<script type=”text/javascript”>

$(document).ready(function(){

$(“.trigger”).click(function(){

$(“.footer_bar”).toggle(“slow”);

$(this).toggleClass(“active”);

return false;

});

});

</script>

Step 2:CSS

.footer_bar { background:#FFFFFF; border:5px solid #EEEEEE; border-width:5px 0 5px 5px; bottom:0;

height:35px; float:left; padding:5px;position:fixed; width:890px; z-index:9999; display:block; }

.footer_bar li{color: #19aaf5; list-style:none; text-align:left;float:left;padding:10px 4px 0;}

.footer_bar h3 { font-size: 12px; margin-bottom: 5px;}

.footer_bar li a{text-decoration:none;}

.footer_bar li a img {opacity:1;width:24px;height:24px;vertical-align:middle;border:0;margin-top:-4px;}

.footer_bar li a img:hover {opacity:0.6;}

ul.last {margin:0; width:305px;padding-right:2px; float:right; }

ul.last a { color: #3399cc; font-size: 10px; text-decoration:underline;}

a.trigger{bottom: 0;border:5px solid #eee;position:fixed;border-width:5px 5px 5px 0;font-size:0px;float:right;background:url(“images/icons/downarrow.png”) no-repeat scroll 0 0 #ffffff;width:40px;height:45px;display: block;margin:0 0 0 905px;}

a.active.trigger {padding: 2px 0 0 0; color:#333; margin-right:25px; border-color:#eee; border-width:5px;

font-size: 12px; background:#ffffff; height:15px; bottom: 0; text-decoration:none; right:0; margin:0 30px 0 0;

width:60px;

}

Step 3: HTML

<div class=”footer_bar”>

<ul class=”last”><img style=”float: left;height:26px;width:26px;margin-top:5px;” src=”images/logo_btm.gif” alt=””><p style=”line-height:20px;”>©2010<a href=”http://ossbooks.com/”&gt; http://www.ossbooks.com</a>&nbsp;|&nbsp;All Rights Reserved </p>

<p style=”text-align:right;”>A microsite by <a href=”http://firstplanet.in/”>First Planet</a></p>

</ul>

<li><a href=”http://ossbooks.com/wp/?page_id=2″>About </a></li>

<li><a href=”http://ossbooks.com/wp/?page_id=640″>Company</a></li&gt;

<li><a href=”http://ossbooks.com/wp/?cat=174″>Photos</a></li&gt;

<li><a href=”http://ossbooks.com/wp/?cat=175″>Videos</a></li&gt;

<li><a href=”http://ossbooks.com/wp/?cat=104″>News</a></li&gt;

<li><a href=”http://twitter.com/ossbooks&#8221; title=”Twitter”><img src=” images/twitter.png” alt=”Twitter”/></a></li>

<li><a href=”http://www.facebook.com/ossbooks&#8221; title=”Facebook”><img src=” images/facebook.png” alt=”Facebook”/></a></li>

<li><a href=”http://www.flickr.com/photos/48588012@N02/&#8221; title=”Flickr”><img src=” images/flickr.png” alt=”Flickr”/></a></li>

<li><a href=”http://www.youtube.com/ossbooks&#8221; title=”Youtube”><img src=”http://ossbooks.com/img/youtube.png&#8221; alt=”Youtube”/></a></li>

<li><a href=”http://in.linkedin.com/pub/opensource-books/1a/13a/593&#8243; title=”Linkedin”><img src=” images/linkedin.png” alt=”Linkedin”/></a></li><li><a href=”http://digg.com/users/ossbooks&#8221; title=”Digg”><img src=” images/digg.png” alt=”Digg”/></a></li>

<li><a href=”http://delicious.com/ossbooks&#8221; title=”Delicious”><img src=” images/delicious.png” alt=”Delicious”/></a></li>

<li><a href=”http://www.youtube.com/ossbooks&#8221; title=”Videos”><img src=” images/video.png” alt=”Videos”/></a></li>

<li><a href=”” title=”Audio”><img src=” images/audio.png” alt=”Orkut”/></a></li>

<li><a href=”” title=”Images”><img src=” images/photo.png” alt=”Orkut”/></a></li>

</div>

<a class=”trigger” href=”#”>Show bar</a>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: