Beautiful Expandable Notification Widget for Blogger.

Advertisements

This is amongst the best widget that might be here. This is very good widget to conclude the longer perhaps the webpage. For example you wish to share a substantial collection of photos and you have not much space within your sidebar then you must use this widget. It can hide the many photos yet when end user clicks in any perhaps the widget suddenly the panel expands and shows the entire collection of photos.

Related Articles might helpful :

Steps to Add Expandable Notification Widget :

Live Demo

Login to Blogger =>Template.
Find ]]></b:skin>
copy the below code and paste it above ]]></b:skin>

#simbh {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;

}

.simbhblog {

position:relative;

cursor:pointer;

text-shadow:1px 1px 2px #000;

padding:7px 15px;

background-color:#000;

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;

}

.simbhblog:hover {color:#ccc}

}

Copy the below code and paste it Below </head>

<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() {

$('.simbhblog').click(function() {

$('#panel').slideToggle('slow');

$('.simbhblog span.in').toggle();

});

});

</script>

<div id="simbh">

<div id="panel">

... type some alert / Notification / message here ...

</div>

<div class="simbhblog">

<span class="in">Click To Expand Notification</span>

<span class="in" style="display:none;">Message Viewing</span>

</div>

</div>