How To Add Attractive Image Sliding Widget To Blogger - CSS

Views:

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/AVvXsEhXl6aDReQ4QRJwym1X8-fmWr5LPCghuPwnYtOjQuFUCeI6NMoKuTNi_T3eL2RYD9uet5MQokaOtx-T_7UEaaxCbzODWing3P1d-AP7ZhN8GUyq-_AkW7c6TwIKtjBBNHzzBqmDsx8O7kc/s1600/pic1.jpg" alt="multi"  /></a>

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

<a href="#" class="c"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuVc7Se2Ejwbfxu-8G0Uq7_2_aqFtiHTYJaHtEltjMGWBMhKM7qhD5qJEtoioLwJ8pk59QJLSVmfjM3wbOSdMDAb9utp0Jxxh2e5Y2-Cc-9eQUbObxkkgIaAu4hpLs43tTPLfoQhaKCR4/s1600/pic3.jpg" alt="blue" /></a>

<a href="#" class="d"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg9pIY7NBZ1f2eTbWOjX4L2CXeXTCIxN3NxCpvSmTOoxFzRsrbb0nLB9MdpwrVUq-00ylSqCha6Ecv8JSYHe1XHSAb2apF7o5qM8M-Ftkvd1Kd-vyu_ufx4fbhz8823wfImyYxVqUSVs8/s1600/pic4.jpg" alt="red globe"  /></a>



</div>

4. Save HTML/Javascript. you are done.



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