<script src="{PATH TO JQUERY}/jquery.js'; ?" type="text/javascript"><!--mce:0--></script>

Step 2: Creating Tab

<ul class="tabs">
<li><a href="#tab1">TAB 1</a></li>
<li><a href="#tab2">TAB 2</a></li>
<li><a href="#tab3">TAB 3</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
Tab1 Content Here
<!-- TAB1 CONTAIN HERE --></div><!-- EOF TAB1-->

<div id="tab2" class="tab_content">
Tab2 Content Here
<!-- TAB2 CONTAIN HERE -->
</div><!-- EOF TAB2-->

<div id="tab3" class="tab_content">
Tab3 Content Here
<!-- TAB3 CONTAIN HERE -->
</div><!-- EOF TAB3-->

</div> <!-- EOF TAB CONTAINER -->

Step 3: Make It Work

$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
activeTab = activeTab.split("#");
$("#"+activeTab[1]).fadeIn(); //Fade in the active ID content

return false;
});
});

Step 4: Adding Beauty

<style>
ul.tabs {margin: 0;padding: 0;float: left;list-style: none;margin-top:30px;border-bottom:1px solid #e9e9e9;}
ul.tabs li {float: left;margin: 0;padding: 0;height: 28px;width:135px;margin-bottom: -1px; overflow: hidden;position: relative;background: #5D99A3;font-family: arial;font-size:11px;margin-right:5px;text-align:center;}
ul.tabs li a {text-decoration: none;color: #fff;display: block;padding-top:9px;outline: none;}
ul.tabs li:hover {background:#ece6d3;color:#454545;}
ul.tabs li.active, ul.tabs li.active a:hover  {background:#ece6d3;color:#454545;}
.tabs li.active a{color:#454545;}
.tab_container {border-top: none;overflow: hidden;clear: both;float: left;height: 533px;width: 470px;background: #ece6d3;margin:0 auto;border:1px solid #e9e9e9;border-top:0px;color:#454545;}
</style>

Demo
Click here for the demo.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Structure

<ul id="menu-main-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a>
   <!-- SUBMENU -->
    <ul style="display: none;">
      <li><a href="#">Live IT Support</a></li>
      <li><a href="#">On Site Support</a></li>
      <li><a href="#">Managed Email</a></li>
      <li><a href="#">Backup and Disaster Recovery</a></li>
    </ul>
   <!-- EOF SUBMENU -->
  </li>
  <li><a href="#">Clients</a></li>  <li><a href="#">Contact Us</a></li>
</ul>

Jquery

<script>
$(document).ready(function(){
$("ul.sub-menu").parent().mouseover(	  function(){
$(this).children('ul.sub-menu').show();
}	).mouseout(	   function(){
$(this).children('ul.sub-menu').hide();
});
});
</script>

Stylesheet

<style>
.navigation li{font-family:Arial, Helvetica, sans-serif; height:31px; font-size:12px; font-weight:bold; color:#ffffff; float:left; padding-left:25px; padding-right:25px; padding-top:24px; background:#304F9E; list-style:none;}
.navigation li a{ text-decoration:none; color:#ffffff;}
ul.sub-menu {padding:0px; margin:0px; position:absolute; z-index:1000; display:none; background-color:#304F9E; width:200px; padding-bottom:10px; margin-top:10px; margin-left:-10px; }
ul.sub-menu li {border-bottom:1px dotted #bbb; height:20px; clear:left; display:block; text-align:left; list-style:none outside none;width:180px; color:#fff; padding:5px; margin:5px;}
</style>

Demo

Click here for the demo

As skype’s  forum has suggested for the use of meta tag in the header but it didn’t worked for me.

So what you can do is just add a character in the  phone number and make it invisible.

<div class="ph_number">(403)26<span style="display:none">_</span>0-9021</div>

I have used underscore( _ ) here. You can use any character in it. But make sure you make it invisible. By use of non-numerical character, skype fails to recognize your number.

Simple And Effective. Cheers

http://www.skype.com/intl/en-gb/tell-a-friend/wizard/

OR

http://www.skype.com/intl/en/tell-a-friend/get-a-skype-button/

Note
Make sure you have enabled Allow my online status to be shown in web under Tools -> Options -> Privacy Settings

Demo

1. Firebug
With this addon you can edit, debug, inspect your html elements, css, javascript, ajax request/response.

2. MeasureIt
Used to drag out a ruler to get the pixel height and width of any element in web page.

3. Modify Headers
This addon gives feature to add, modify, filter you HTTP request headers. Widely Used for the web service development for smart phones.

4. Fireshot
Adds ability to take screenshot of entire/portion of webpage. You can edit your screenshot with annotation tools for text, highlights etc.

5. Dummy Lipsum
Generates Lorem Ipsum dummy text. You can specify the number of paragraphs and words to generate.

6.  ColorZilla
Provides eyedropper and color picker to get the color reading from any point of the web.

These are the addons that i am using for the web development. If you have more… Share It.

How to install addons in firefox?

1. Go to Tools -> Add-Ons
2. Click on Get Add ons tab
3. Search Addons
4. Click on Add To Firefox