Add Simple CSS3 Slider To Your Blogger Post

A Photo Gallery blog should need a slideshow to make the blog attractive one. If your blog post entirely contain numerous pictures like wallpaper or collection of beautiful moons , then there is a chance to make all image in one block, that is to make slider.

It will be boring for visitors when all the picture is in one by one steps, but when all the pictures present in one thick and given navigation for changing pictures will be attractive for the visitors. So this slider will help you to present all the picture in one thick.

Live Demo

How To Add Simple CSS3 Slider In Blogger Post

• Go To Blogger > Template > Edit HTML.
• Find  ]]></b:skin>  and add the following  CSS code before it. Then Save It.

#slider {
 padding: 0;
 width:100%;
 height:400px;
 margin:0 auto;
 background:#000;
 position:relative;
 border:3px solid #000;
 overflow:hidden;
}
#slider .gallery {
 padding:0;
 margin:0 auto;
}
#slider .gallery input {
 display:none;
}
#slider .gallery li {
 list-style-type:none;
 margin:0;
 padding:0;
}
#slider .gallery img {
 width:100%;
 height:100%;
 position:absolute;
 -moz-transition:all 900ms linear;
 -o-transition:all 900ms linear;
 -webkit-transition:all 900ms linear;
 transition:all 900ms linear;
 opacity:0;
 visibility:hidden;
}
#slider input:checked ~ img,
#slider input:checked ~ img#motion-left,
#slider input:checked ~ img#move-down,
#slider input:checked ~ img#move-over,
#slider input:checked ~ img#run-around,
#slider input:checked ~ img#move-right,
#slider input:checked ~ img#italic {
 -moz-transform:rotate(0deg) scale(1);
 -ms-transform:rotate(0deg) scale(1);
 -o-transform:rotate(0deg) scale(1);
 -webkit-transform:rotate(0deg) scale(1);
 transform:rotate(0deg) scale(1);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter:alpha(opacity=100);
 opacity:1;
 top:0 !important;
 left:0;
 right:0;
 visibility:visible;
}
#slider .nav {
 padding:2px;
 background:rgba(0,0,0,0.5);
 color:#09f;
 text-decoration:none;
 margin:0;
 position:absolute;
 top:0;
 left:0;
 right:0;
 text-align:center;
}
#slider label {
 padding:1px 10px;
 background:rgba(252, 252, 252, 0.31);
 color:#FFF;
 font:bold 12px/20px Arial,sans-serif;
 text-decoration:none;
 margin:1px 4px 1px 0;
 display:inline-block;
 cursor:pointer;
 position:relative;
 -webkit-transition: .3s;
 -moz-transition: .3s;
 -ms-transition: .3s;
 -o-transition: .3s;
 transition: .3s;
}
#slider label:hover {
 background: #000;
}
#slider .gallery li .description {
 position:absolute;
 padding:5px;
 background:rgba(10, 10, 10, 0.59);
 color:#fff;
 left:0;
 right:0;
 bottom:-1000px;
 font:bold 14px/20px Arial,sans-serif;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter:alpha(opacity=0);
 opacity:0;
 -moz-transition:all 1s ease-in-out;
 -o-transition:all 1s ease-in-out;
 -webkit-transition:all 1s ease-in-out;
 transition:all 1s ease-in-out;
}
#slider input:checked ~ .description {
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter:alpha(opacity=100);
 opacity:1;
 bottom:0;
 -moz-transition-delay:0.5s;
 -o-transition-delay:0.5s;
 -webkit-transition-delay:0.5s;
 transition-delay:0.5s;
}
#slider .gallery li .description a,
#slider .gallery li .description a:visited {
 color:#ff0;
 text-decoration:none;
}
#slider .gallery img#motion-left,
#slider .gallery img#move-right,
#slider .gallery img#move-down,
#slider .gallery img#move-over,
#slider .gallery img#run-around,
#slider .gallery img#italic {
 -moz-transition-delay:0.5s;
 -o-transition-delay:0.5s;
 -webkit-transition-delay:0.5s;
 transition-delay:0.5s;
}
#slider .gallery img#motion-left {
 left:-100%;
}
#slider .gallery img#move-right {
 left:100%;
}
#slider .gallery img#move-down {
 top:100%
}
#slider .gallery img#move-over {
 top:-100%
}
#slider .gallery img#run-around {
 -moz-transform:rotate(1230deg) scale(0);
 -ms-transform:rotate(1230deg) scale(0);
 -o-transform:rotate(1230deg) scale(0);
 -webkit-transform:rotate(1230deg) scale(0);
 transform:rotate(1230deg) scale(0);
}
#slider .gallery img#italic {
 opacity:0;
 -moz-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -ms-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -o-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -webkit-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
}

Now add the following HTML code wherever you want. Better to add in your blogger post. So while you are posting, you may want to add lot of image. Then try this widget and make that all image in a slideshow. Add below code in HTML tab in blogger post editor or if you want show anywhere else in your blog, add it in HTML/JavaScript widget in layout page.

<div id="slider">
<div class="gallery">
<li><input checked="true" id="a" name="system" type="radio" />
<img id="motion-left" src="IMAGE URL" />
<div class="description">DESCRIPTION TEXT</div>
</li>
<li><input id="b" name="system" type="radio" />
<img id="move-right" src="IMAGE URL" />
<div class="description">DESCRIPTION TEXT</div>
</li>
<li><input id="c" name="system" type="radio" />
<img id="move-over" src="IMAGE URL" />
<div class="description">DESCRIPTION TEXT</div>
</li>
<li><input id="d" name="system" type="radio" />
<img id="move-down" src="IMAGE URL" />
<div class="description">DESCRIPTION TEXT</div>
</li>
<li><input id="e" name="system" type="radio" />
<img id="run-around" src="IMAGE URL" />
<div class='description'>DESCRIPTION TEXT</div>
</li>
<li><input id="f" name="system" type="radio" />
<img id="italic" src="IMAGE URL" />
<div class='description'>DESCRIPTION TEXT</div>
</li>
<li><input id="g" name="system" type="radio" />
<img id="run-around" src="IMAGE URL" />
<div class='description'>DESCRIPTION TEXT</div>
</li>
<li><input id="h" name="system" type="radio" />
<img id="move-right" src="IMAGE URL" />
<div class="description">DESCRIPTION TEXT</div>
</li>
<li><input id="i" name="system" type="radio" />
<img id="move-over" src="IMAGE URL" />
<div class="description">DESCRIPTION TEXT</div>
</li>
<li><input id="j" name="system" type="radio" />
<img src="IMAGE URL" />
<div class='description'>DESCRIPTION TEXT</div>
</li>
</div><!--End up .gallery-->
<div class='nav'>
<label for='a'>1</label>
<label for='b'>2</label>
<label for='c'>3</label>
<label for='d'>4</label>
<label for='e'>5</label>
<label for='f'>6</label>
<label for='g'>7</label>
<label for='h'>8</label>
<label for='i'>9</label>
<label for='j'>10</label>
</div><!--End up .nav-->
</div><!--End up #slider-->

You have to change few things in above HTML code. Replace IMAGE URL and DESCRIPTION TEXT with your image url and description.

SHARE

Tweet