Don't Miss

Attractive CSS3 Slider to your Blogger Posts

By Zohaib Liaqat - 6 Comments
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.

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 !

Tags:

6 comments to ''Attractive CSS3 Slider to your Blogger Posts"

ADD COMMENT
  1. In order to save space in your moving truck, you may have considered dismantling some furniture. This is a good idea to optimize the space in your utility but also to have less heavy furniture and less bulky to transport once disassembled.PERFECT MOVERS DUBAI and Abu dhabi will make proper preparation to make your move smooth.

    ReplyDelete
  2. You ought to have adored your auto. If you do, treat your hoverboard the indistinct way. Pass on it to the shop and purchase fitting on every UK Hoverboard For Sale parts one area gets unnecessarily used (mishandled tires, batteries or maybe control social occasions). Do now not trade the segments yourself also. If you get from, by then you can acknowledge for quite a while with their whole accreditation program.

    ReplyDelete
  3. I think everyone need to read this.
    Thanks for sharing.
    Very nice and usefull information.

    Gati Packers And Movers Bangalore

    ReplyDelete