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="">
<script src="">
    $(document).ready(function() {
<link rel="stylesheet" href="" 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">
<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.


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

  2. great post, helped me lot.

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

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

    how i must fix this eror?

  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, i want some good solution for it to be lighter like a simple html page. hope you understand.
    thanks for your expected help.

  6. @MoviezMobile

    you want to keep home page without any posing?

  7. where we put widget that become tab view?