Blogger Tips And Tricks|Latest Tips For Bloggers

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

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just before the ]]></b:skin> 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 </head> tag .

5.Copy below code and paste it just before the </head> tag .

<script type="text/javascript" src="Javascripts/yahoo-dom-event.js"></script><script type="text/javascript" src="Javascripts/animation-min.js"></script><script type="text/javascript" src="Javascripts/main-javascript.js"></script>

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.

<div id="Layer1"><div class="leftCol"><div id="lhsHeader6" class="leftBoxHeading_Off" onclick="lhsAction('6',true,'T6_Effective_Behaviour_Change');">CSS Expandable Button</div><div id="lhsExpander6" class="leftBoxExpander"><div id="lhsInner6" class="leftBoxInnerPic"> <img src="images/left-box-inner-img.png" alt="Left image" height="18" width="287" />      <ul>        <li><a href="">add your link here</a></li>        <li><a href="">add your link here</a></li>        <li><a href="">add your link here</a></li>        <li><a href="">add your link here</a></li>        <li><a href="">add your link here</a></li>        <li><a href="">add your link here</a></li>        <li><a href="">add your link here</a></li>      </ul></div></div><div id="lhsFooter6" class="leftBoxFooter_Off" onclick="lhsAction('6',true,'false');"></div></div></div></div>

You are done.

Download java script files and images

Your final results will look like this:

After click on button:

File Under : button, css, html, java script