To Use this widget, Just follow below steps:
1.Login to your blogger dashboard----> layout- ---> Edit HTML
2.Scroll down to where you see ]]></b:skin> tag .
3. Copy the code below, and paste above ]]></b:skin>
#image-hover {
}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}
#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}
#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}
#figure:hover .caption {
margin-bottom:0px;
}
#image-hover .caption {
width:100%;
height:90px;
padding:10px;
background:#B1D7F0;
color:#B1D7F0;
font-family: Arial, Helvetica, sans-serif;
}
#image-hover .caption b {
text-shadow: 0px 2px 0px #B1D7F0;
}
#image-hover .caption {
color: #000000;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}
4.Copy below code and paste it just before the </head> tag.
<a href="http://s2ptech.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>5.Now go to Layout-->Page Element and click on "Add a gadget".
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.innerfade=function(options){return this.each(function(){$.innerfade(this,options)})};$.innerfade=function(container,options){var settings={'animationtype':'fade','speed':'normal','type':'sequence','timeout':2000,'containerheight':'auto','runningclass':'innerfade','children':null};if(options)$.extend(settings,options);if(settings.children===null)var elements=$(container).children();else var elements=$(container).children(settings.children);if(elements.length>1){$(container).css('position','relative').css('height',settings.containerheight).addClass(settings.runningclass);for(var i=0;i<elements.length;i++){$(elements[i]).css('z-index',String(elements.length-i)).css('position','absolute').hide()};if(settings.type=="sequence"){setTimeout(function(){$.innerfade.next(elements,settings,1,0)},settings.timeout);$(elements[0]).show()}else if(settings.type=="random"){var last=Math.floor(Math.random()*(elements.length));setTimeout(function(){do{current=Math.floor(Math.random()*(elements.length))}while(last==current);$.innerfade.next(elements,settings,current,last)},settings.timeout);$(elements[last]).show()}else if(settings.type=='random_start'){settings.type='sequence';var current=Math.floor(Math.random()*(elements.length));setTimeout(function(){$.innerfade.next(elements,settings,(current+1)%elements.length,current)},settings.timeout);$(elements[current]).show()}else{alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'')}}};$.innerfade.next=function(elements,settings,current,last){if(settings.animationtype=='slide'){$(elements[last]).slideUp(settings.speed);$(elements[current]).slideDown(settings.speed)}else if(settings.animationtype=='fade'){$(elements[last]).fadeOut(settings.speed);$(elements[current]).fadeIn(settings.speed,function(){removeFilter($(this)[0])})}else alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');if(settings.type=="sequence"){if((current+1)<elements.length){current=current+1;last=current-1}else{current=0;last=elements.length-1}}else if(settings.type=="random"){last=current;while(current==last)current=Math.floor(Math.random()*elements.length)}else alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');setTimeout((function(){$.innerfade.next(elements,settings,current,last)}),settings.timeout)}})(jQuery);function removeFilter(element){if(element.style.removeAttribute){element.style.removeAttribute('filter')}}
//]]>
</script>
<script type='text/javascript'>
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
});
$('.fade').innerfade({
speed: 1000,
timeout: 6000,
type: 'random_start',
containerheight: '1.5em'
});
$('.adi').innerfade({
speed: 'slow',
timeout: 5000,
type: 'random',
containerheight: '150px'
});
});
</script>
6.Select "html/java script" and add the code given below and click save.
<marquee><ul id="portfolio" style="list-style-type:none;">Go For Demo
<li><div id="image-hover">
<div id='figure'><a href="http://s2ptech.blogspot.com/search/label/Electronic%20projects?max-results=1000"><img alt="Electronics Projects" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Qpp4cLaIT5y4_AYiAyF39La3LVQYIqycPhU17BZwv4oKXUFdRXgFZsjdKfSLlvoTQ6THIkJ3kL7nJHORC61jjrZbv-yg-FLqnjezP9IvjUTEt6m_BR_rpUvUz6qMaWacRu31tlY61hA/s200/Electronics+Projects.jpg"/></a><span class='caption'>
Electronics Projects
</span></div></div></li>
<li><div id="image-hover">
<div id='figure'><a href="http://s2ptech.blogspot.com/search/label/blogger%20tips?max-results=1000"><img alt="Blogger Tips and Widgets" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB3f3ApdtDun1sI-avRDPcqqNZ0w_MvNU5CxtS7bktZppTUy8e3Fb2PD-bBwFL9p93x_syoFPP5sc9Hmzrjjzix60xDK7HTZakmrmqFQWtwZ-GmV-07YJZILfqMuFtggJfOxGDHdJ2WJg/s200/blogging-tips.jpg"/></a><span class='caption'>
Blogger Tricks and Widget
</span></div></div></li>
<li><div id="image-hover">
<div id='figure'><a href="http://s2ptech.blogspot.com/search/label/Computer%20Tricks?max-results=1000"><img alt="Computer Tricks" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUCtpqhba-C1DTFPg2RGcCux8uitiaUoAbsDNX6eO-FhJ22OVqh0bVL90LfVyVMfwRvZT61u0BL58pMGLeT3RtZ4EfDgleOH4UweuYnExlLCGKFxwYavbD5-rG6j0cFEaIW0DNCCzMfNo/s200/computer+dude_full.jpeg"/></a><span class='caption'>
Computer Tricks and Tips
</span></div></div></li>
<li><div id="image-hover">
<div id='figure'><a href="http://s2ptech.blogspot.in/search/label/How%20To%20Hack?max-results=1000"><img alt="How To Hack" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqmEnEUjT7yPxwRsEuO2aPidCcdbDdYVhQ2KfSUaZEWFRkUL0rDHXt2oBzgfWIiUqP31QGsKB4eKKvKGVzG3818rOL0R8W6zXuPoQwNgO8aMZGnOKfW8hNZQUqLHIMvWWsDbAa-7JqD8/s200/hacking.gif"/></a><span class='caption'>
How To Hack
</span></div></div></li>
</ul></marquee>
That's it. Enjoy...
