Menu bar

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>

Tuesday 27 May 2014

How to add menu and submenu in wordpress wp-admin?

Administration Menus in Wordpress


Note: All this coding will be take place in functions.php of wordpress theme. I have already tested there. Its working smoothly.

To add an administration menu, you must know the wordpress functions to add menu and submenu:
add_menu_page();
syntax: <?php add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); ?>
add_action();
syntax: <?php add_action( $hook, $function_to_add, $priority,
$accepted_args ); ?>
add_submenu_page();
syntax: <?php add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function ); ?>

Three steps to follow:

1. Create a function.
2. Register the above function using the admin_menu action hook.
3. Create the HTML output for the page (screen) displayed when the menu item is clicked.


CREATE A FUNCTION:

<?php
function register_custom_menu_page() {
    add_menu_page('custom menu title', 'Confirm', 'add_users', 'custompage', '_custom_menu_page', null, 3);
}
?>

REGISTER THE ABOVE FUNCTION USING THE admin_menu ACTION HOOK:

<?php
add_action('admin_menu', 'register_custom_menu_page');
?>

CREATE THE HTML OUTPUT FOR THE PAGE (SCREEN) DISPLAYED WHEN THE MENU ITEM IS CLICKED:

<?php
function _custom_menu_page(){
   include 'foldername/Confirm.html';
}
?>

After this small effort you will see the admin menu was incremented by one more menu namely 'Confirm' and when you click on 'Confirm', output of Confirm.html will be displayed on the screen.

Now time to add submenu to this top level menu named 'Confirm'.
same procedure , but wordpress function changes.

CREATE A FUNCTION:

<?php
function register_my_custom_submenu_createcourse() {
add_submenu_page( 'custompage', 'Pending', 'Pending', 'manage_options', 'my-custom-submenu-createcourse', 'my_custom_submenu_createcourse_callback' );
}

?>

REGISTER THE ABOVE FUNCTION USING THE admin_menu ACTION HOOK:

<?php
add_action('admin_menu', 'register_my_custom_submenu_createcourse');
?>

CREATE THE HTML OUTPUT FOR THE PAGE (SCREEN) DISPLAYED WHEN THE MENU ITEM IS CLICKED:

<?php
function my_custom_submenu_createcourse_callback() {
include 'foldername/Pending.html';
}
?>
 That's all to add submenu to top level menu.
 If you like to add multiple submenu to top level menu then you need to change the function name foe each submenu and register admin_menu action hook accordingly.

<?php
 function register_custom_menu_page() {
   add_menu_page('custom menu title', 'Confirm', 'add_users', 'custompage', '_custom_menu_page', null, 3); 
}
add_action('admin_menu', 'register_custom_menu_page');

function _custom_menu_page(){
    include 'foldername/anypage.php';
}


add_action('admin_menu', 'register_my_custom_submenu_createcourse');
function register_my_custom_submenu_createcourse() {
add_submenu_page( 'custompage', 'Pending', 'Pending', 'manage_options', 'my-custom-submenu-createcourse', 'my_custom_submenu_createcourse_callback' ); 
}

function my_custom_submenu_createcourse_callback() {
  include 'foldername/anypage.php';
}


add_action('admin_menu', 'register_my_custom_submenu_page');
function register_my_custom_submenu_page() {
add_submenu_page( 'custompage', 'Cancelation', 'Cancelation', 'manage_options', 'my-custom-submenu-page', 'my_custom_submenu_page_callback' ); 
}

function my_custom_submenu_page_callback() {
   include 'foldername/anypage.php';
}
?>

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.