Menu bar

Showing posts with label IT. Show all posts
Showing posts with label IT. Show all posts

Thursday, 29 May 2014

How to add skype click to call and chat buttom in your website?

Now a day, with social media button,  new trend of keeping skype call and chat button has been increased.

So in this post we will look over , how to use skype click to call and chat button in our webpage or website.
its that easy as it look in images displayed below.

Let Click here to visit official website of skype to get code by entering required data.
On Clicking , the page with below image will be open and insert data as explained in images.
Copy code and paste it where you need skype button.






How to make sidebar menu using slide toggle?

Copy this content to your HTML or PHP page and modify according to your requirement.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slide Toggle</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
#toggle-view {
font-family:arial;
font-size:11px;
margin:0;
padding:0;
width:200px;
background:#999;
border-radius:15px;
border:1px solid #CCC;
}

#toggle-view  li {
position:relative;
cursor:pointer;
list-style:none;
font-size:18px;
padding:9px 0px 9px 0px;
border-bottom:1px solid #ccc;
text-align:center;
`
}

#toggle-view ul{
background:#FFFFFF;
padding:0px;
margin:0;
}

#toggle-view h3 {
margin:0;
font-size:20px;
border-bottom:1px solid #ccc;
padding:5px;
background:#344da1;
color:#FFFFFF;
}

#toggle-view h3:hover {
background:#1f2e60;
}
#toggle-view h3:active {
background:#1f2e60;
}
#toggle-view h3:visited {
background:#1f2e60;
}
#toggle-view h3:focus {
background:#1f2e60;
}
</style>
</head>

<body>
<div id="toggle-view">
  <h3 class="grow-link">Categories</h3>
  <ul class="grow" style="display: none;">
    <li  value="best-seller">Best Seller</li>
    <li  value="charger">Charger</li>
    <li  value="memory">Memory</li>
  </ul>
  <h3 class="grow-link">Brands</h3>
  <ul class="grow" style="display: none;">
    <li  value="Naztech">Naztech</li>
    <li  value="Spider">Spider</li>
    <li  value="Gemini">Gemini</li>
    <li  value="Reactor">Reactor</li>
    <li  value="Kingston">Kingston</li>
    <li  value="sandisk">sandisk</li>
  </ul>
  </div>
<script>
// toggle


menu on sidebar and main nav
jQuery('ul.grow').hide();
jQuery('.grow-link').click(
function() {
jQuery(this).next().slideToggle('slow');
return false;
}
);
</script>
</body>
</html>

Monday, 5 May 2014

How to create facebook badges?

We will discuss many of one functionalities of Facebook  .i.e. creating you own badge an publish in your website.


> To create your facebook badge , initially you need to login to your account.
> After login you will see the address bar as "www.facebook.com"
> Now append 'badges' after the link e.g:  "http:www.facebook.com/badges"
> You will seee the screen as below:

 


> Now  create your badge according to requirement on clicking one of the link among Given on that page.
> There is also customization of the badges once you have selected.
> After completion of badges modification you can use anywhere in your website by taking code from facebook.