Show Mobile Navigation
,

Add a Expand-Collapse Sidebar Widget

Hemant Verma - 11:57 AM

Expand Collapse System is very awesome be'coz it give a very Professional feel to blog and as MBT first launched their expand collapse widget in the comment bar, so many blog owners use that system in their blog but as using the jQuery and other languages so that doesn't work work in many blogs but this widget will work in all kind of blog be'coz this you have to add this widget  in the HTML/JavaScript Widget so you don't need to make changes in your template editor. This Widget is simply a made by the CSS for designing and using the JavaScript and some other elements to perform this particular task in this widget.

This idea came in my mind by watching the comment box of blogger which perform same task. 



Add Expand-Collapse Widget

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Layout
  • Add a HTML/JavaScript Gadget
  • Paste below code in it.

 <style>
#sidebar ul {margin-top: -5px;}
#sidebar ul.children {margin: 6px 0 -6px 0;}
#sidebar ul li {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Kdl8yVGFyQrVe8tTDmZEZsgdzqioA9TQUlg-PEZrTI9TdIOnDpM3E2XBo6uOsqngCaHL4yKkZzpdyqqmQi953-tomQqiuX80H4IoCL8Un3RwXdP47VFtn7JlfdOBAvNHQbsFt37BEdE/s1600/ORANGE.GIF") no-repeat scroll 0 5px #FFFFFF;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;}
#sidebar a, #sidebar a:visited {color: #575251;}
#sidebar a:hover {color: #cf4125;text-decoration:bold;}
h2.post-title {margin-bottom: 15px;line-height: 32px;font-size: 28px;font-weight: bold;color: #000000; font-family: Arial; padding-left: 5px;
}
}
</style>

<style>
.post {
    clear: none;
    display: inline;
    float: left;
    height: 550px;
    margin: 0 5px 5px 0;
    overflow: hidden;
    padding: 8px;
    width: 338px;
 border: 1px solid #DCE5EE;
  }
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://bloggerblogwidgets.googlecode.com/files/w2b-bloggerpagenavi.js' type='text/javascript'></script>

<div id='sidebar-wrapper'>
<div class='sidebar section' id='sidebar'>
<div class='widget-content'>
<div class="msg_list">
<p class="msg_head">Widget 1</p>
<div class="msg_body">
<ul>


<li>
<a href="#">Widget 1.1</a>
</li>


<li>
<a href="#">Widget 1.2</a>
</li>

  </ul>

 
  </div>

<p class="msg_head">Widget 2</p>
<div class="msg_body">
 <ul>

 <li>
<a href="#">Widget 2.1</a>
   </li>


 <li>
<a href="#">Widget 2.2</a>
   </li>




</ul>
</div>


 
<p class="msg_head">Widget 3</p>
<div class="msg_body">
 <ul> <li>
<a href="#">Widget 3.1</a>
   </li>
  
   <li>
<a href="#">Widget 3.2</a>
   </li>
   
  
  
   </ul>
 
</div>
  
<p class="msg_head">Widget 4</p>
<div class="msg_body">
 
  <ul>

 
   
  

   <li>
<a href="#">Widget 4.1</a>
    </li>
 
 

 
   <li>
<a href="#">Widget 4.2</a>
    </li>

 
   </ul>
</div>

<p class="msg_head">Widget 5</p>
<div class="msg_body">

<ul>


<li>
<a href="#">Widget 5.1

</a></li>


</ul></div>

<p class="msg_head">Widget 6</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 6.1</a>
</li>




<li>
<a href="#">Widget 6.2</a>
</li>

</ul>

</div>


<p class="msg_head">Widget 7</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 7.1 </a>
</li>
<ul>

</ul></ul></div>


<p class="msg_head">Widget 8</p>
<div class="msg_body">
<ul>

<li>
<a href="#">Widget 8.1</a>
</li>


<ul>

</ul></ul></div>
<style>
p{
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 320px;
display: block;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#C3A17E;
margin:1px;
color:#FFFFFF;
font-family: Sans-serif,Arial,Helvetica;
font-size: 12px;
font-weight: bold;
}
.msg_body {
padding: 15px 10px 15px;
background-color:#F4F4F8;
}
</style>


<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script></div>
</div></div></div>

  • Save Your Widget.

Note:Don't Try to Change any Other Code. All Codes are highly Sensitive


Make Changes....!

  • Replace Red colored area with widget heading (as you can see in gif image)
  • Replace Orange colored area and made their links
  • Replace Blue colored area with links



If Any Problem Comes, Ask in Comments


14 comments:

  1. Look at the image http://4.bp.blogspot.com/-hFbb8F8-qFQ/UNmauFP1FCI/AAAAAAAAZSo/lmM1_XhMvu8/s1600/dropdown.png and i want like this . Can you help me or not plz reply ok.

    ReplyDelete
  2. @azad hussainI understood ur request. We will post it soon on your request. Keep Stay tune with us.

    Thanks & Regards
    Hemant Verma

    ReplyDelete
  3. Your this Javascript (http://bloggerblogwidgets.googlecode.com/files/w2b-bloggerpagenavi.js) not working also i not able to directly add this menu on my blog by using HTML/JavaScript Gadget. Its give me a error. Plz tell me how can i manually add it on my blog without HTML/JavaScript Gadget. Thanks advance and plz ans me quickly.

    ReplyDelete
  4. @sormaThis is widget is perfectly work on HTML/JavaScript Widget. Mention your blog URL here. Make sure you paste correct codes. Try again and then tell me.

    Thanks & Regards,
    Hemant Verma

    ReplyDelete
  5. Blog by using HTML. Its give me a error. Plz tell me how can i man

    ReplyDelete
  6. this widget cannot remove how to remove it tell me fast

    ReplyDelete
  7. @Hamza mukhtargo to layout and click on HTML/JavaScript link and then click on Remove button.

    ReplyDelete
  8. This worked perfectly the first time I tried it. I then deleted the widget and started over, but now every time I add this code to a widget, my main post layout gets all screwed up.

    Any ideas?

    ReplyDelete
  9. @Rob Wilkinson

    To add to this, basically what happens is whatever width I set for the sidebar (in this code) changes the maximum available width for each post, even though the main blog width is sufficient.

    ReplyDelete
  10. @Rob Wilkinson

    I got same problem. The width and height for the post is changed. How to fix this. Please help!!

    ReplyDelete
  11. @Rob Wilkinson

    I found the solution...search for height and width in the code and change the pixels :)

    ReplyDelete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
  13. I found solution for my blog. I removed all this section from the script:

    style
    .post {
    clear: none;
    display: inline;
    float: left;
    height: 550px;
    margin: 0 5px 5px 0;
    overflow: hidden;
    padding: 8px;
    width: 630 px;
    border: 1px solid #DCE5EE;
    }
    /style

    ReplyDelete

You may use these HTML tags and attributes: <a href="" title=""> </a> <b> </b><strong> </strong>

 



Make Your Blog Like a Pro
About | Contact | Affiliates | Privacy Policy | TOS