How To Create CSS Expandable Button in blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag .

3.Copy below code and paste it just before the ]]> tag .

.leftCol {
width: 295px;
overflow: hidden;
padding: 15px 0px 0px 0px;
margin: 0px 25px 0px 0px;
float: left;
clear: both;
}
.leftBoxHeading_Off {
width: 295px;
height: 19px;
background: url(images/left-box-heading-off.png) no-repeat;
color: #94c93d;
font-size: 100%;
padding: 8px 0px 0px 18px;
cursor: pointer;
}
.leftBoxExpander {
width: 295px;
overflow: hidden;
height: 0px;
background: url(images/left-box-expander-bg.png);
}
.leftBoxInnerPic {
width: 287px;
overflow: hidden;
background: url(images/left-box-inner-bg.png) bottom repeat-x;
margin: 0px 0px 0px 1px;
}
.leftBoxInnerPicImg {
width: 89px;
overflow: hidden;
float: left;
padding: 0px 0px 0px 18px;
}
.leftBoxInnerPicUlWrap {
width: 167px;
overflow: hidden;
float: left;
}
.leftBoxInnerPic ul {
width: 138px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 9px;
list-style: none;
}
.leftBoxInnerPic ul li {
color: #6699cc;
font-size: 110%;
width: 266px;
}
.leftBoxInnerPic ul li a {
color: #6699cc;
text-decoration: none;
display: block;
padding: 3px 0px 3px 20px;
}
.leftBoxInnerPic ul li a:hover {
color: #6699cc;
}
.leftBoxHeading_Off {
width: 295px;
height: 19px;
background: url(images/left-box-heading-off.png) no-repeat;
color: #6699cc;
font-size: 110%;
padding: 8px 0px 0px 18px;
cursor: pointer;
}
.leftBoxHeading_On {
width: 295px;
height: 19px;
background: url(images/left-box-heading-on.png) no-repeat;
color: #6699cc;
font-size: 110%;
padding: 8px 0px 0px 18px;
cursor: pointer;
}
.leftBoxFooter_Off {
width: 295px;
height: 12px;
background: url(images/left-box-footer-off.png) no-repeat;
cursor: pointer;
margin: 0px 0px 15px 0px;
}
.leftBoxFooter_On {
width: 295px;
height: 12px;
background: url(images/left-box-footer-on.png) no-repeat;
cursor: pointer;
margin: 0px 0px 15px 0px;
}
.leftBoxExpander {
width: 295px;
overflow: hidden;
height: 0px;
background: url(images/left-box-expander-bg.png);
}
.leftBoxInner {
width: 287px;
overflow: hidden;
margin: 0px 0px 0px 1px;
}
.leftBoxInner ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 9px;
list-style:none;
}
.leftBoxInner ul li {
color: #6699cc;
font-size: 75%;
width: 266px;
}
.leftBoxInner ul li a {
text-decoration: none;
display: block;
padding: 3px 0px 3px 20px;
}
.leftBoxInner ul li a:hover {
color: #6699cc;
}
.leftBoxInnerPic {
width: 287px;
overflow: hidden;
background: url(images/left-box-inner-bg.png) bottom repeat-x;
margin: 0px 0px 0px 1px;
}

4.Now again Scroll down to where you see tag .

5.Copy below code and paste it just before the tag .

6.Now click on "save template".

7.Now go to layout- -> Page Elements and click on "add a gadget".

8.Choose "html /JavaScript" add the code given below and click save.

CSS Expandable Button

 images/left-box-inner-img.png" alt="Left image" height="18" width="287" />
      

        
add your link here
        
add your link here
        
add your link here
        
add your link here
        
add your link here
        
add your link here
        
add your link here