Attractive CSS3 Slider to your Blogger Posts

Sliders have been around for a long time and today we've an amazing and attractive slider for your blog. If you want to add a number of photos to your blogger post, then adding them separately one by one doesn't looks impressive and attractive. Today we are going to share a slider for your blogger posts so that you can show all of your photos in one block and it'll also help your users to navigate easily. In this slider you can add 10 photos with their respective titles, descriptions and post links.

Demo

How to Add this CSS3 Slider

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template and click on Edit HTML Button

Step 3. Search ( Ctrl +F ) for the following tag :

]]></b:skin> 

Step 4. Now copy the below code and paste it just above/before it  ( ]]></b:skin> ).

#slider {
 padding: 0;
 width:100%;
 height:400px;
 margin:0 auto;
 background:#000;
 position:relative;
 border:3px solid #00cc00;
 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:000000;
 color:#green;
 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: #00cc00;
}
#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);
}

Step 5. Hit the Save Template Button
Step 6. Now add the following HTML wherever you want in the post

<div id="slider">
<div class="gallery">
<li><input checked="true" id="a" name="system" type="radio" />
<img id="motion-left" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="b" name="system" type="radio" />
<img id="move-right" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="c" name="system" type="radio" />
<img id="move-over" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="d" name="system" type="radio" />
<img id="move-down" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="e" name="system" type="radio" />
<img id="run-around" src="YOUR IMAGE URL" />
<div class='description'>Image Description</div>
</li>
<li><input id="f" name="system" type="radio" />
<img id="italic" src="YOUR IMAGE URL" />
<div class='description'>Image Description</div>
</li>
<li><input id="g" name="system" type="radio" />
<img id="run-around" src="YOUR IMAGE URL" />
<div class='description'>Image Description</div>
</li>
<li><input id="h" name="system" type="radio" />
<img id="move-right" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="i" name="system" type="radio" />
<img id="move-over" src="YOUR IMAGE URL" />
<div class="description">Image Description</div>
</li>
<li><input id="j" name="system" type="radio" />
<img src="YOUR IMAGE URL" />
<div class='description'>Image Description</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-->

Note: To Add this HTML code to a Blogger Post you have to click on the HTML Button below the post title in your post editor
Customization:

• Replace YOUR IMAGE URL with the URL of images you want to add
• Replace Image Description with your Image descriptions

That's it !

Share This:

Tags:

Widgets

• Prevoius
• Next