Thursday, April 28, 2011

jQuery Toggle Button Widget For Blogger

2 comments 4/28/2011
Sign up to receive our site updates!
jQuery is Most Powerful and useful Library.In my blog i used jQuery to Develop no of widgets for making more useful and attractive.

List of jQuery Widgets for Blogger

In this article i am going to show how add a toggle widget for Blogger.

jQuery Toggle



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.

/* TT- Start Toggle Div CSS */
div.toggle_head {
padding: 0px 3px 0 15px;
margin: 0 0 0px 0;
margin-top:10px;
background: #0080FF url(https://lh4.googleusercontent.com/_-A4vw5BwqxA/TZmBZf6FvRI/AAAAAAAAFcs/dJzL2rz1KpY/minus.jpg) no-repeat right center;
height: 25px;
line-height: 25px;
width: 94%;
border-radius: 5px 5px 0px 0px;
float: left;
_float: none;
/* Float works in all browsers but IE6 */
border: 1px solid #999;
border-bottom: 1px solid #ccc;
cursor: pointer;
border-radius:5px;
color:#ffffff;
vertical-align:center;
}
div.toggle_head li {
padding-top:6px;
color: #ffffff;
display: block;
font: bold 12px Arial, Tahoma, Verdana;
text-transform: uppercase;
vertical-align:center;
}
div.toggle_head li:hover {
color: #000000;
border-radius: 5px 5px 5px 5px;
font: bold 12px Arial, Tahoma, Verdana;
text-transform: uppercase;
vertical-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
div.toggle_active
{
border-radius: 5px 5px 5px 5px;
padding: 0px 3px 0 15px;
background: #0080FF url(https://lh5.googleusercontent.com/_-A4vw5BwqxA/TZmBZahS8rI/AAAAAAAAFcw/p49jXBjARvI/pluse.jpg) no-repeat right center;
font: bold 12px Arial, Tahoma, Verdana;
text-transform: uppercase;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.toggle_body {
margin: 0 0 0px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 100%;
clear: both;
}

/* TT- End Toggle Div CS S*/
»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 Toggle Script--------------*/
$(document).ready(function(){
$("#toggle_head").click(function() { $(this).toggleClass("toggle_active").next().slideToggle("slow");
});
});
/*-------- End TechTasks Toggle 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.
<div class='toggle_head' id='toggle_head'><li>Poll</li></div>
<div class='toggle_body' id='toggle_body'>
<b:section class='sidebar' id='toggle' preferred='yes'>

</b:section>
</div>

Finally Save the Template.

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


Your comments and suggestions are most encouraging thing for me to write more articles.

Happy Blogging.
Your Ad Here

2 comments:

Anonymous said... [Reply]

if i want to add more what to do

Anonymous said... [Reply]

ex: in the sample img

when site redirects only "poll" should appear
but not the matter inside it how............?

Respects for your's Questions & Opinions

  • Friends
  •  

    Recent Posts

    New Comments

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

    Share
    Me
    Twitter Facebook Google +1 Pinterest Delicious Digg Stumbleupon More

    Connect to TT Facebook Google +1
    Back to Top