Attractive Blogger Image Sliding With Css

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/AVvXsEjx-tZEf6b5lY5ELe_C3rF42sMVUvM1aVWEuE648pJ9iPH84byWo69E93b5di0Qv8FaLkJ_i8DfluvUNVWADMbubqfCsVfI75LYqBXFOmyDPAi-FiR6QrYbSVtHU_Cdw6GcnIB5Yq6Wcy8/s1600/pic1.jpg" alt="multi"  /></a>
<a href="#" class="b"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitz08mdVTl_2szUqJE9aGdTkb4MjeoQ8GjOyfo9iJ1BkDYDmpEGpCNHNxpVeAEcZGIqkW1U7Lz351lg0Gxg6_mWXFuQj5iQUIBun9S5GCgpYsUU4EVpKrbTV1I1MkvpkI1G-OUC_Kv6vU/s1600/pic2.jpg" alt="green" /></a>
<a href="#" class="c"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjArF64lG9nQoiG7IdvQ-uUjAr4ip5PB6ZEnFDZD_XmKnKnWsIub0vB2a1a_YIR8esabIQq3J3pPiIMyTaEnnUKHSqA9d1y1SOW-4SnwPaGqfQudbZtmTRJP44QMyQaibTUNEpDx1EuTNM/s1600/pic3.jpg" alt="blue" /></a>
<a href="#" class="d"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnOp6QuaFfhHBB-hnkYyFDDbmTOENLY64VigMV-7533B6hzl4EWkTPc1oPfcD28hQJeN1IRfxVEayorQhpkEvISTNQggKkl0kS_yGtV0OC4hbe_jX4PwXz2DczFLlVmlzZIDR3w2NLOxc/s1600/pic4.jpg" alt="red globe"  /></a>

</div>

4. Save HTML/Javascript. you are done.

Read More