Click And Expand Panel Content Box Widget For Blogger

Click and expand panel content box widget for blogger that expands when you click. Good to share photos and for summarizing the parts of longer pages.

Click And Expand Panel Content Box Widget For Blogger
Click And Expand Panel Content Box Widget For Blogger

This is one of the best widget that you will find here. This is pretty good widget to summarize the longer part of the webpage. For example you want to share a large collection of photos but you have very little space in your sidebar then you must use this widget. It will hide all the photos but when user clicks on any part of the widget suddenly the panel expands and shows the entire collection of photos.

Few Best Widget For Blogger

Animated image gallery widget for blogger
Hammer Effect drop down menu bar widget for blogger
Image accordion widget for blogger
Tabbed content box widget for blogger
Window effect social media widget for blogger

Qualities of click and expand panel widget.

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

Below I will describe how to add this widget to your blogger blog and how to customize it for best results. So let's check it out the code first.

Complete Code

<style type="text/css">
#avdhoottovik {display:block}

#panel {
border:2px solid #a7cc54;
border-width:2px 2px 0 2px;
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;

.avdhootpanel {
text-shadow:1px 1px 2px #000;
padding:7px 15px;
border-top:3px solid #a7cc54;
font:bold 14px Times,Sans-Serif;
-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;

.avdhootpanel:hover {color:#ccc}

.avdhootpanel:after {
border-color:#333 #333 transparent #333;
<script src="" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.avdhootpanel').click(function() {
<div id="avdhoottovik">
<div id="panel">

... type here ...

<div class="avdhootpanel">
<span class="in">Click And See The Magic</span>
<span class="in" style="display:none;">Expanded Panel</span>

How to add this widget into blogger

  • First login to blogger.
  • Go to layout.
  • Click on  add a gadget.
  • 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.


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

Few essential widget for blogger

Related posts widget for blogger
Popular posts widget for blogger
Chat widget for blogger
Comments widget for blogger

As I already said that this is the best widget for summarizing the content for longer pages and also to give a beautiful look to your blogger template.

Next Post Previous Post