Do you want to use skype button in your webpage to notify your skype status? You can get your skype button and embed in your webpage. Follow the link below to get your skype button.
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
Including Jquery
<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
Skype, smart enough, but creates problem for your design with its feature to wrap numbers in button.
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
Loading ...