Tuesday, April 5, 2011

jQuery Accordion Widget for Blogger

7 comments 4/05/2011
Sign up to receive our site updates!
Accordion is more use as Multi Tabbed Widget.you might have been seeing on many sites.
I this article i am going to how to add Accordion as a Widget for your blog.
Check out my other useful jQuery Widgets For Blogger


  • Closeable jQuery Floating Message Box For Bloggers




  • Simple jQuery Multi Tabbed Navigation Widget For Blogger




  • Smooth Scrolling Widget For Blogger



  • image



    Step 1:Login to Blogger dashboard » layout » Edit HTML

    Find(CTRL+F) ]]</b:skin>tag.

    Now copy and paste below code just before ]]</b:skin> this.


    /* TechTasks accordian CSS*/
    #TTAccordian {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }

    .accordionButton {
    width:100%;
    float: left;
    _float: none;
    background: #E0E0E0; /* Default Background Color*/
    border: 1px solid #999;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    border-radius:5px;
    }
    .accHead
    {
    padding:5px 5px 5px 10px;
    font: bold 12px Arial, Tahoma, Verdana;
    text-transform: uppercase;
    }
    .accordionContent {
    width: 100%;
    float: left;
    _float: none;
    background: #ffffff;
    border-radius:5px;
    }

    .on {
    background: #0080FF; /* Selected Accordion Background Color*/
    border-radius:5px;
    color:#ffffff;
    }

    .over {
    background: #5CAEFF; /* Mouse Over Background Color*/
    color:#fff
    border-radius:5px;
    color:#ffffff;
    }

    /* End TechTasks accordian CSS*/

    »If you want customize the Tabbed Widget colors just Follow the comments to Change the colors

    »Simply replace these colors with your custom colors in the above code respectively.

    Step 2:Find </head> .

    Cope and paste the below just before </head> this.

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' type='text/javascript'/>
    <script type='text/javascript'>
    /*----------Start TechTasks Tabber Script--------------*/
    $(document).ready(function() {
    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.accordionButton').click(function() {
    //REMOVE THE ON CLASS FROM ALL BUTTONS
    $('.accordionButton').removeClass('on');
    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
    $('.accordionContent').slideUp('normal');
    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
    if($(this).next().is(':hidden') == true) {
    //ADD THE ON CLASS TO THE BUTTON
    $(this).addClass('on');
    //OPEN THE SLIDE
    $(this).next().slideDown('normal');
    }
    });
    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
    //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
    $('.accordionButton').mouseover(function() {
    $(this).addClass('over');
    //ON MOUSEOUT REMOVE THE OVER CLASS
    }).mouseout(function() {
    $(this).removeClass('over');
    });
    /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
    /*** CLOSES ALL S ON PAGE LOAD ****/
    $("div.accordionContent").hide();

    /* OPENS THE DIV THAT IS ASSIGNED WITH THE ID open */
    $("#open").trigger('click');
    });
    /*----------End TechTasks Tabber Script--------------*/
    </script>
    Step 3:Find <div id='sidebar-wrapper'> or <div id='sidebar'>

    If u can't find above code don't bother about that,Coz template designers are developed different ways.Just find the starting <Div> of Sidebar

    Now copy and paste below code just below that.
    <!-- Start accordian -->
    <div id='TTAccordian'>
    <div class='accordionButton' id='open'><div class='accHead'>Facebook</div></div>
    <div class='accordionContent'>
    <b:section class='sidebar' id='accordion1' preferred='yes'>
    </b:section>
    </div>
    <div class='accordionButton'><div class='accHead'>Future Widgets</div></div>
    <div class='accordionContent'>
    <b:section class='sidebar' id='accordion2' preferred='yes'>
    </b:section>
    </div>
    <div class='accordionButton'><div class='accHead'>About Author</div></div>
    <div class='accordionContent'>
    <b:section class='sidebar' id='accordion3' preferred='yes'>
    </b:section>
    </div>
    </div>
    <!-- end accordian -->
    Finally Save the Template.


    Then Go to your page Elements Page and add the widgets for your accordion.

    I think i am free to respond your queries.

    Source: stemkoski.com
    Your Ad Here

    7 comments:

    Beben Koben on April 21, 2011 at 10:15 PM said... [Reply]

    your blog is great...
    salom from Beben Koben si bloglang anu ganteng kalem tea \m/

    Anonymous said... [Reply]

    wow really nice ...
    and so many jQuery Widgets....

    Ravinder on May 4, 2011 at 5:28 PM said... [Reply]

    Widget not working on my blogs...help me
    mehta.mnc@gmail.com

    Rajesh on May 10, 2011 at 10:39 PM said... [Reply]

    @Ravinder Mehta Can u give elaborate explanation abt ur problem?

    Ravinder on May 12, 2011 at 10:19 PM said... [Reply]

    @Rajesh Chekuri
    CSS code is working...
    i can saw widget format there on my blog...but javascript code is not working

    Rajesh on May 22, 2011 at 11:21 AM said... [Reply]

    @Ravinder MehtaHi Ravinder,Can provide your blog URL where widget setup had done.

    Nadia Kamel on September 11, 2011 at 3:44 PM said... [Reply]

    it is not working too

    Respects for your's Questions & Opinions

  • Friends
  •  

    Recent Posts

    Copyright 2008 All Rights Reserved Tech Tasks Template by Rajesh Kumar Chekuri