Material Design floating button in jquery and CSS

Hello web Developers and Bloggers. I have made this Material design floating button for all websites including Blogger, WordPress, Joomla, and all other CMS based websites, And also for non-CMS websites written in any Programming languages like PHP,JSP,ASP etc.

Material Design floating button in jquery and CSS

This will give attractive look feels like Material Design in Android 5.0 Lollipop. This is a small and Responsive for all devices. You can add many links inside this button.

Requirements :

  1. Jquery plugin installed (* if not installed then search on google)
  2. FontAwesome library installed
  3. Material Design Library.
  4. Material design Button (* which is made by me)

Whats in free version :

  1. All features working
  2. No overlay background (* Transparent background)
  3. Our site’s credit link.

Whats in Pro version ( $5 only) :

  1. Same features as free version
  2. Blurred Overlay background (* to make button clearly visible)
  3. No credit link.
  4. Future updates.
  5. Full technical support.
  6. to get pro version send mail to pawneshwergupta@gmail.com and i’ll guide further.

Download from below button (* free version only)

Download now

How to install Material Design floating button :

  • Blogger user

  1. After downloading file extract it any where.
  2. upload “xdafloat.css” and “xdafloat.js” on Google drive, google code or any other site which you love to host your files (* search on google to know how to host CSS and JS to google drive).
  3. Open blogger.com and choose your blog, and goto Templates,
  4. Now click on “Edit HTML
  5. Now search for “<head” tag and just below this paste following code with your CSS file link.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> (* this is Font Awesome library)
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/> (* this is material icon library)
<link href='link of xdafloat.css' rel='stylesheet'/>

  1. Now again search for “<body” and just below this paste following code, with your JS file link.

<script src='//code.jquery.com/jquery-1.11.3.min.js'/>
<script src='//code.jquery.com/jquery-migrate-1.2.1.min.js'/> (* these both are jquery library)
<script src="link of xdafloat.js"></script>

Material Design floating button in jquery and CSS

  1. Now click on “Save Template” Button.
  2. Now goto Layout and add “HTML/JavaScript” gedget where you want.

Material Design floating button in jquery and CSS

  1. And in content box paste all contents from “xdafloat.html

Material Design floating button in jquery and CSS

  1. Now replace links with your actual links,texts with your texts, and to change icons get code from FontAwesome. as shown below
  2. For example change “fa fa-github” with your desired icon from FontAwesome.
  • For WordPress users

  1. After Downloading files make a folder name “xda” inside current activated theme’s directory and  upload “xdafloat.js” and “xdafloat.css” to that “xda” folder.
  2. Now link “xdafloat.js” file with your website using following code in “functions.php

function xdablogs_script()
{
    wp_register_script( 'xdablogs-custom-script', get_template_directory_uri() . '/xda/xdafloat.js' );

    wp_enqueue_script( 'xdablogs-custom-script' );
}
add_action( 'wp_enqueue_scripts', 'xdablogs_script' );

  1. as the same now link xdafloat.css file using following code in “functions.php

function xdablogs_style()
{
    wp_register_style( 'xdablogs-custom-style', get_template_directory_uri() . '/xda/xdafloat.css', array(), '20120208', 'all' );

    wp_enqueue_style( 'xdablogs-custom-style' );
}
add_action( 'wp_enqueue_scripts', 'xdablogs_style' );

  1. Now goto Appearance -> Widgets and add new “Text widget” and paste contents from xdafloat.html to “text widget

Material Design floating button in jquery and CSS

  1. Now replace links with your actual links,texts with your texts, and to change icons get code from FontAwesome. as shown below
  2. For example change “fa fa-github” with your desired icon from FontAwesome.
  • For Non- CMS users :

  1. After downloading file extract it anywhere.
  2. Now upload xdafloat.js and xdafloat.css to your server anywhere.
  3. Now open your page where you want to show float button

  4. for example open  ”index.php” , and below “<head” tag “link” xdafloat.css file.
  5. And below “<body” tag link xdafloat.js file.
  6. Now anywhere inside “<body” tag paste contents from xdafloat.html (* you’ll need to convert html code to php code).

Material Design floating button in jquery and CSS

  1. save “index.php” and done.

Sceenshots in Mobile :

Material Design floating button in jquery and CSSMaterial Design floating button in jquery and CSS