Click And Expand Panel Content Box Widget For Blog of Blogger

This is one of the most effective widget that you just can notice here. this is often pretty smart widget to summarize the longer a part of the webpage. for instance you would like to share an outsized collection of photos however you've got little or no area in your sidebar then you need to use this widget. it'll hide all the photos however once user clicks on any a part of the widget suddenly the panel expands and shows the complete collection of photos.

Qualities of click and expand panel widget.

• Auto resize. It automatically fits with width.
• To show a large collection of photos.
• To summarize the longer page.
• You can insert images, links, tables and anything inside this widget.
• Made with HTML, CSS and Javascript.
• Fast in loading.

Demo!

Click And See The Magic Expanded Panel

Below i'll describe the way to add this widget to your blogger blog and the way to customise it for best results. thus let's check it out the code first.

Complete Code

<style type="text/css">
#bobtovik {display:block}
#panel {
background-color:#96BC43;
border:2px solid #a7cc54;
border-width:2px 2px 0 2px;
height:250px;
overflow:auto;
margin:0;
padding:10px;
color:#111;
font:normal 12px Times,Serif;
-webkit-box-shadow:inset 0 0 7px #222;
-moz-box-shadow:inset 0 0 7px #222;
box-shadow:inset 0 0 7px #222;
display:none;
}
.bobpanel {
position:relative;
cursor:pointer;
text-shadow:1px 1px 2px #000;
padding:7px 15px;
background-color:#333;
border-top:3px solid #a7cc54;
color:#e5e5e5;
text-align:center;
font:bold 14px Times,Sans-Serif;
font-style:italic;
-webkit-box-shadow:0 -1px 2px #222;
-moz-box-shadow:0 -1px 2px #222;
box-shadow:0 -1px 2px #222;
-webkit-border-radius:0 0 14px 14px;
-moz-border-radius:0 0 14px 14px;
border-radius:0 0 14px 14px;
}
.bobpanel:hover {color:#ccc}
.bobpanel:after {
content:'';
position:absolute;
top:100%;
margin-top:-10px;
left:5%;
width:0;
height:0;
display:block;
border-width:20px;
border-style:solid;
border-color:#333 #333 transparent #333;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.bobpanel').click(function() {
$('#panel').slideToggle('slow');
$('.bobpanel span.in').toggle();
});
});
</script>
<div id="bobtovik">
<div id="panel">
... type here ...
</div>
<div class="bobpanel">
<span class="in">Click And See The Magic</span>
<span class="in" style="display:none;">Expanded Panel</span>
</div>
</div>
</div>

How to add this widget into blogger

• First login to blogger.
• Go to layout.
• Click on add a gadget.
• Choose HTML/JAVASCRIPT.
• Copy the above code.
• Paste it into a gadget.
• You are done.

How to customize click and expand the panel widget content box for blogger

1. You can see ...type here... Section in the code. Here you can insert your code like a table or whatever or a collection of photos that you want to share.
2. Search for "Click and See the Magic" here you can type your own title.
3. Search for "Expanded panel" here you can type what you want to show after the panel gets expanded.

NOTE:-
If your blogger template has two instances of same javascript than maybe this widget will not work. So take care of it.

You Also Like:

Recommended Post Slide outwidget for Blog of Blogger