Attractive Blogger Image Sliding With Css

This is a nice image show for your blog.You can add any image for this.This isbetter for saving space in your blog.Less space, you can add few photos. you can trythis, Follow these steps.

1.  Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below 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/AVvXsEhaSv1j8CrjRGUyd2pYveU5gCxzvkaU7J-0DrjyyMHiC43p08luNexjohbG0eS1VXGz6xZZVy0WNxTcKz0uAEUVgIGWIb7o-iYSxUx9rivctcuddVcbzM-fNsPbPw9qiLmApcCtgGoJ_94/s1600/pic1.jpg" alt="multi"  /></a>
<a href="#" class="b"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivczJeMDSCj3LXPDEhKfX7_w3YMK6opQeOkj3qH7HIJvG6v8gWNHQt7qMYznCVr9KNHVHHJy7zVDqxj58L5J8UJyfZaAl8zu2DI7QyJdwC8WQIIjAGn3db9cr_yPYdRiwSdc19KGHyPik/s1600/pic2.jpg" alt="green" /></a>
<a href="#" class="c"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_DITyACPcPY_4r0T5vfJEo8AyGiHpwxVzqncawZxM2aNWlV29u2j8QiTksRtaiAa6Brqn3a_lMEHg77hULkBsFkQ4ja_jS3kSYDTLGOVlz_Pms6NC6NvpLx0U7tR1HjexXyhdrTF65cM/s1600/pic3.jpg" alt="blue" /></a>
<a href="#" class="d"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWNVrvlpM_n8fHe-W2z4UHtmkLhFYAu52Tr55VdSUcHnET7C-lPkxD0p2JxaypAPtGjV0xH626OoBaw9PeJ4TRIeRcUYAqa6yj7kszPlXegwT9FyKhVRR-JQ8JR6vuhPb8wiKwYcksQQ0/s1600/pic4.jpg" alt="red globe"  /></a>

</div>

4. Save HTML/Javascript. you are done.