Friday, September 14, 2012

How To Add Attractive Image Sliding Widget To Blogger - CSS

This is a simple trick for all bloggers. Just following this post and get this widget.

Click Add Gadget and select 'HTML/Javascript'

Paste below code {Change/Add image url (Red Color)}.

Copy this code:




<style type="text/css">

#gallerydiv {

padding:0;   

margin:0; 

list-style-type:none; 

height:267px; 

width:535px; 

overflow: hidden;

}

#gallerydiv a {

width: 40px;

float: left;

width: 40px;

height: 267px;

overflow: hidden;

text-decoration:none; 

cursor:default; 

}

#gallerydiv a.d { overflow: visible; }

#gallerydiv a:hover {

width: 400px;

}

#gallerydiv a img {

border:0; 

margin:0; 

padding:0;

}

</style>

<div id="gallerydiv">

<a href="#" class="a"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc5MYG5rMAhQGdOJrX7IaSD0loVazBfXM9v9paLPOizB-xE_ISKGFaEFBr6mh0QwUI6gWa9tDR54YIsqolJ0N02q8YGaW1vky00KFCyj3Kd9XY2fanSqSJw9sDIfd9d3Pr8tRLIHdCeGc/s1600/pic1.jpg" alt="multi"  /></a>

<a href="#" class="b"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilOPVMbsjAwRD8JAG9EK_GEet2Yol-kKR10PrzjakPJdTYFmkIaM4pw-k7J8Bx6VSC_8uftTtG24tuTrygMCxX9TU78piXAcEnDqjQMs22hrc4UkkUfjRAkDGnvrm5zVPrSwm0324GtrU/s1600/pic2.jpg" alt="green" /></a>

<a href="#" class="c"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPirIpjSEbLgw616soNRbht8V3bSJdfYyp9nyz1bxc56NYlxmUajp5SAJdh0zwNR74G5uLDfTMb9vCTmeRV2qtKWKCCNdheWrcB1NtsqIGakneSiOcRL3IHT5JQUfmvK847cgWtqztaWk/s1600/pic3.jpg" alt="blue" /></a>

<a href="#" class="d"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrn0xc-Mj7KlUTXHsn-Bw3j1bQ2njVzoC3piTZGbuP42WzMUQXhDKpPc4wa4Xcyux3YR3JqwyqjT2CS3aH-t-i3lKq_lM5f8QLTt1em8wX1WOsVlXVWukz6sGqwTzTVBjSERx-UCuo7-0/s1600/pic4.jpg" alt="red globe"  /></a>



</div>

4. Save HTML/Javascript. you are done.

.............................................................END..............................................................................