NOTICE

Adfly Links not working Find Direct Links HERE

Auto Switch Horizontal Content Slider Tabs Using jQuery For Blogger

Here is my First content slider with Tabs.The cool thing about this slider is that there is no need to click Tabs , Just hover with cursor to see content under that tab.Its Simple but powerful jQuery widget.Just see demo link below to see its working =)






Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)






Installation :


Step 1 :

CSS + Javascript

Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML
Now Find ]]></b:skin> Then Replace it with Below Code






]]></b:skin>




 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
 <script src='http://bloggerplugnplay-files.bravehost.com/tabbedContent.js' type='text/javascript'/>







Step 2:

HTML

Login your BLOGGER account And click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE




<div style="padding: 15px;">

<div class="content">
<div class="tabbed_content">
<div class="tabs">
<div class="moving_bg">
&nbsp;
</div>


<span class="tab_item">  Tab Name 1  </span>
<span class="tab_item">  Tab Name 2  </span>
<span class="tab_item">  Tab Name 3  </span>
<span class="tab_item">  Tab Name 4  </span>


</div>
   
<div class="slide_content">     


<div class="tabslider">

     
<ul>   Content 1   </ul>
<ul>   Content 2   </ul>
<ul>   Content 3   </ul>
<ul>   Content 4   </ul>



</div>


<br style="clear: both"/>
</div>
</div>
<br/>
<br/>
</div
></div>







Here's your new content slider :)

Credits : http://www.gayadesign.com distributed and converted for blogger by Blogger Plug n Play

4 comments :

  1. tq for the scrpt, good job well done..

    ReplyDelete
  2. I tried it and it doesn't work.. =(

    ReplyDelete
  3. ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript
    is not found error
    it is make error please upload the file anywhere and give link...

    ReplyDelete

Feel free to leave comment if you like above widget, have any questions or just say Hi! :)