Friday, October 28, 2011

How To Add Jquery Multi Tab View Widget For Blogger

1. Log in to your blogger  and Go to Design >> Edit HTML

2.  put check mark to “Expand Widget Templates

3. Find this tag by using Ctrl+F    </head>

4. Paste  below code Before  </head> tag







<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
    $(document).ready(function() {
        $("#tabs").tabs();
    });
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />

5. Now Go to Design >> Page Element

6. Click Add Gadget and select 'HTML/Javascript'

7. Paste below one of below code.

<div id="tabs">
<ul><li>
<a href="#tabs-1">Tab-1</a></li><li>
<a href="#tabs-2">Tab-2</a></li><li>
<a href="#tabs-3">Tab-3</a></li></ul>
<div id="tabs-1">Script or Text Here</div>
<div id="tabs-2">Script or Text Here</div>
<div id="tabs-3">Script or Text Here</div>

You can replace Script or Text Here  with text or any script you want.

8.  After save HTML/Javascript 
you are done.

12 comments:

  1. good post......gonna implement in by blog

    ReplyDelete
  2. great post, helped me lot.

    ReplyDelete
  3. How can I use an other color than red for this?
    thks!

    ReplyDelete
  4. XML error message: Content is not allowed in prolog.

    how i must fix this eror?

    ReplyDelete
  5. I got a very big Problem, I just want some solution for my blog. It is Too Heavy, and it is causing big problem for me. I want posts to appear in 2nd page, and i want first page to be without posts, i will add something else on first page, like a simple html welcome page or something like that. How to do that in blogger?? minimum post count is 1 per page, i simply want it to not appear in homepage, if i remove the post widget, it is deleted for all pages. what is the solution??

    Here is my blog http://www.mobilemoviesite.com, i want some good solution for it to be lighter like a simple html page. hope you understand.
    thanks for your expected help.

    ReplyDelete
  6. @MoviezMobile

    you want to keep home page without any posing?

    ReplyDelete
  7. where we put widget that become tab view?

    ReplyDelete