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.

• Log in to blogger account > Go to Design >> Page Element

• 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/AVvXsEh-wIOUgeYK3b_LNd9i9uWFuBTUtbNZxW9ADC1EjGkhY3q0SkxtMz9wbXj2CJjKq8t3P5XqGH5h__vz1-vqtYOypbYNt3fThJR8OEeKn_lmSjtJZBVoPSgguv0TEudm6j7oLnvwd5HQ08w/s1600/pic1.jpg" alt="multi"  /></a>

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

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

<a href="#" class="d"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4tW4nAEQhT7UkvBXYJddlaHmUw7rOHrFDyqb38f_Y97WeghTRlwDJ5I20c-d19TfI2eGRlQiftvy50e1flG48ADdJ9e4Fpf8a-m1yHrYMH3hgiF7VJ_e-SgUfmL0iN-slzZHMKDCVpEc/s1600/pic4.jpg" alt="red globe"  /></a>



</div>

4. Save HTML/Javascript. you are done.



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

Posted in: Blogs and Websites