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
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@azad hussainI understood ur request. We will post it soon on your request. Keep Stay tune with us.
ReplyDeleteThanks & Regards
Hemant Verma
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@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.
ReplyDeleteThanks & Regards,
Hemant Verma
Blog by using HTML. Its give me a error. Plz tell me how can i man
ReplyDelete@dizüstü bilgisayar What error msg comes?
ReplyDeletethis widget cannot remove how to remove it tell me fast
ReplyDelete@Hamza mukhtargo to layout and click on HTML/JavaScript link and then click on Remove button.
ReplyDeleteThis 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.
ReplyDeleteAny ideas?
@Rob Wilkinson
ReplyDeleteTo 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.
@Rob Wilkinson
ReplyDeleteI got same problem. The width and height for the post is changed. How to fix this. Please help!!
@Rob Wilkinson
ReplyDeleteI found the solution...search for height and width in the code and change the pixels :)
This comment has been removed by a blog administrator.
ReplyDeleteI found solution for my blog. I removed all this section from the script:
ReplyDeletestyle
.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