Skyrocket Your Blog Traffic!
Join our newsletter to get guides which will help you boost your blog traffic for free!



Awesome Take Tour Widget For Blogger !

Nitishk Gupta 12/08/2015 2 Comments
Options
Post Font

Arial
Oswald
Roboto (Default)
No Disturb Mode
take tour widget for blogger


You must have seen the introductions which come in the websites like G+ , twitter , facebook , etc. when you go as a new there or press help button ,  but have you wondered that you can also add those type of introductions to your blog ! By adding them you can help your readers to understand your blog easily and increase Subscribing Opt In rate of your blog !
So what are you waiting for ? Grab this widget now !



What Is Intro Js ?

Intro js is a fast js made to provide introductions on websites , many websites use it to help their readers better understand the UI of the website. 
You may see the live demo by the going to below link and clicking "Show me how" in the intro Js website.

LIVE DEMO

Is It Easy To Use ?

Yep ! it is very easy too use it as you just need to remember two tags and then you can create infinite introductions for your blog in minutes !
And it will not affect your blog Page Speed Insights and loading time also and the most important it is fully free to use ! 

How Does It Work -

I don't know the full working of this js but know that this js on triggering fades up the entire body and focuses on the element in which you've added the attributes and then show tooltip onto them which help your readers to better understand your blog !

Adding The Widget In Blogger -

So these are the simple steps through which you can add this awesome widget in your blog -

1) Adding The Main JS And CSS -

  • Go To Blogger Dashboard
  • Then Go To Template 
  • Click Edit HTML
  • Find </head> in the template and add this code above it -
<!--Take Tour By MBA Starts--><script src='http://myfilezone.96.lt/uploads/introjsmin.js' type='text/javascript'></script><link href='http://myfilezone.96.lt/uploads/introjsmin.css' rel='stylesheet'/><!--Take Tour By MBA Ends-->
  • Save your template and the first part is done !
2) Adding The Introductions -

You can add the introductions easily by using just two tags which are data-step & data-intro .

data-step : It shows the no. of step , keep unique in each element.
data-intro : It shows the main introduction line.

For Example if i want to add the introduction for my header then i'll just add these two codes -

<div class='header' data-step="1" data-intro="Hello This Is Header">Header Content...</div>

Now by adding the two attributes i have described a introduction for the header , you can add it to infinite articles but having unique data-step number.

One more example -

<div class='yourclass' data-step="Your Unique Step No." data-intro="Your Introduction Text">Content</div>

Replace Your "Unique Step No." With the step number and "Your Introductions Text" with your text which you want to show in the tooltip.

You can add these attributes by going to your template section and adding the attributes by finding the sections or widget.

3) Triggering The Introductions -

After adding the classes the introductions will not come until you trigger them by using this link -

<a href="javascript:void(0);" onclick="javascript:introJs().start();">Take Tour</a>

You can add this link either in sidebar as a widget r in your navbar to trigger the introductions.
What now ? Congratulations ! you've successfully added the take tour widget in your blog !

Need Any Help ?

So this was the article about adding the take tour widget in your blog , hope you liked it and share your experience through comments.
By the way are you having any problem in adding this widget ? If yes then do let me know them through comments so that i may help you in installing this widget.
Happy Blogging And Good Luck :D



Skyrocket Your Blog Traffic!

Join our newletter to get guides which will help you boost your blog traffic for free!

Nitishk Gupta
Hi, I Am Nitishk Gupta, a blogger and web developer. I am an addicted blogger who wants to share each and everything I have learned so far in my 4 years journey. Feel free to send me friend request or follow me. Thanks!

2 comments:

  1. Nice Tutorial. Thanks i was looking for this from days. thanks again

    ReplyDelete
    Replies
    1. Thanks For Your Kind Words. :)
      Keep Coming For More Great Articles. :D
      BTW Next Time Please Use Your G+ Profile To Comment So That We Can Mention You. :O

      Delete

Powered by Blogger.