Step By Step Take Tour process using intro.js

Today i'm going to share something useful tutorial with you all, i hope my past posts are helpful to you. This Take Guide Tutorial is mainly used to show the new specification and new feature release of any product for first use, for that we are going to use this Take tour guide process with the help of intro.js and css. lets see the complete tutorial below this.

DOWNLOAD LIVE DEMO

Intro JS

A JavaScript/HTML5 library for better new feature introduction and step-by-step users guide for websites and projects.

HTML
yellow highlighted code is for make start the function onclick. then that red high lighted codes are data what have to present in the tour guide list. you can get clear idea with demo.

<div class="container">
  <div class="introjsclass" onClick="javascript:introJs().setOption('showBullets', false).start();">
    <h3 align="center"> Click here to Take Tour </h3>
  </div>
  <table width="60%" height="409" border="1" cellpadding="1" cellspacing="0" style="margin:0 auto;">
    <tr>
      <td height="92" width="40%;" align="center" data-step=1 data-intro="Logo Comes here..">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWvOdIiG12ffCJuB4q3pygAo8JIVmr_4serpR20MRj6PzghHHaIqPdxhbWyLOlvntAvLoz_rQBUzXKQCUeMqN9V6S2jpw8ty6uVpsbJe2iechFfbT2reo9nbu5NaXlJCxJUcOk_IwrdYFx/s1600/new2.png"></td>
      <td width="40%;" data-step=2 data-intro="Search Bar comes here, here you can search content, what you need.?"></td>
    </tr>
    <tr>
      <td height="44" colspan="2" data-step=3 data-intro="Titie of the post comes here.."><h2>Title Come here</h2></td>
    </tr>
    <tr>
      <td height="230" valign="top" data-step=4 data-intro="Description abou the post, images also comes here." colspan="2"> Description of the post</td>
    </tr>
    <tr>
      <td height="41" colspan="2" align="center" data-step=5 data-intro="Footer of the blog">&copy; All Rights Reservered to
        <a href="https://www.facebook.com/2my4edge">2my4edge</a></td>
    </tr>
  </table>
</div>

CSS & JS
intro js and intro css files are important files. and we have to add jquery file with this.

<link href="css/introjs.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src='js/intro.min.js'></script>