This slider is better then Nivo Slider which I gave you some days ago.This slider image size is 600✖200.This is having awesome drop menu shadow effect which make it beautiful and also having slide timer with pause button.If you want to test this slider use demo button.
Code is very lengthy so copy and customize it carefully!!
- Go to blogger Dashboard.
- Click on Layout Tab.
- Click On Add Gadget Link.
- Now Add HTML/Javascript and add below code there.
<style>
#slider {
width: 600px;
height: 200px;
margin: 40px auto 0;
overflow: visible;
background-color: #362c30;
border: 10px solid #362c30;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
position: relative;
}
#mask {
overflow: hidden;
}
#slider:hover {
background-color: #fff;
border: 10px solid #ddd;
}
#slider:hover #pause {
opacity: 1;
}
#slider:hover #progress {
background-color: rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#pause {
width: 600px;
height: 200px;
position: absolute;
top: 0;
opacity: 0;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiye7tZvaXEAcW8yin3Rwqcg6Zd9kS0ySh2ZvvhXkZN3Suzd2_58tAzIEouR3GzoqKNflgR_puD2b5BxsjvdqhKl4EHdicV-9eLmZGkmprPaRDk4Pnci_A6mWB1OAU0d9x3-6iF47Dxqo0/s1600/helperblogger.com-paused.png);
background-position: 566px 10px;
background-repeat: no-repeat;
pointer-events: none;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
}
#progress {
width: 1px;
height: 1px;
background-color: #ffd000;
-moz-animation: progress 18s infinite;
-webkit-animation: progress 18s infinite;
position: relative;
top: -1px;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
}
#overlay {
width: 600px;
height: 200px;
position: absolute;
top: 0;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWg7sp_G8AskXcbDpxZWLlu8mx1EvdSt0ugywLFkaYSwqyoK3xZLIeUIP2A_dLIVqcORqhTMk7IWsaQPMNNftn0Y0TNQXo6r94VftPo5PGemOeAaOHy4x1M_ZJt15EgmIDfTWS5un4ESU/s1600/helperblogger.com-overlay.png);
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
opacity: 0.5;
-moz-animation: overlay-fade 18s infinite;
-webkit-animation: overlay-fade 18s infinite;
}
#slider ul {
width: 2400px;
list-style: none;
padding: 0;
margin: 0;
-moz-animation: slide-animation 18s infinite;
-webkit-animation: slide-animation 18s infinite;
position: relative;
left: 0px;
}
#slider li {
display: inline;
width: 600px;
height: 200px;
margin: 0;
padding: 0;
float: left;
position: relative;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI3zOcF1dyPhVTLxCN0RXr2WyiJbz-xJkUvkLhkq_EHU3V77wVZ4XqZwAElf3vHRJdkjlxKl7N_JFeffinCAe2RGvq49xpl7sWYDN-iuykxZqyPsbeTV-vthIbrBgn-Gud6MjgBBcTY3k/s1600/helperblogger.com-loader.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
}
#slider li:last-of-type {
background-color: #362c30;
}
#slider li a {
display: block;
text-decoration: none;
}
#slider li span {
display: block;
width: 560px;
padding: 15px 20px;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(54,44,48,0.6);
border-top: 1px solid #362c30;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
}
#slider-shadow {
width: 100%;
height: 260px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3R-Yc_1uuRA2AciLhZ4DjzzaX-0LefnO1pOn5Wm4LhtGv2uxlLrJAQkcauiI9iuWXBkmas9P7MPjMx1tSJBjafyGk3GEX5MZBem29io-p1wTQprAuV_m-5pmj1zp_uuVN8IP_AGXqVwU/s1600/helperblogger.com-slider-shadow.png);
background-position: center bottom;
background-repeat: no-repeat;
margin: 10px auto 0;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider ul li span h2 {
font-size: 24px;
line-height: 24px;
color: #fff;
font-weight: normal;
font-family: 'Communist-Regular';
text-shadow: 1px 1px 1px #362c30;
}
</style>
<div id="slider-shadow">
<div id="slider">
<div id="mask">
<ul>
<li>
<a href="#" title="ADD YOUR TITLE HERE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bt3hFbjYEvRvu3fWwQUU43C6kNA4373bORrF8nH0VcqY4qq9cS0-S7NRj-s82sks5s8qcEfT8MDebxzXs7GN7hfRy6yoMtW1P013BhMMJovi8iZtBe-KJQ4cNw-tfbT4bR9m-oVWgQs/s1600/helperblogger.com-1.png" /></a><span><h2>ADD CAPTION HERE</h2></span>
</li>
<li>
<a href="#" title=" ADD YOUR TITLE HERE "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHtPXTiyWSgCdJxihWyxlidKl81-vwJvT1hUQlppX4GVtKyJGdkJ9jcHCUinDMEi75grsoP5_6pIocsGb9iKyLmFmBGS6ucaWAXUVx53v7Q2eq686heNX8pGfKWiBNS_6w_BVKGYASNs/s1600/helperblogger.com-4.png" /></a>
<span><h2> ADD CAPTION HERE </h2></span>
</li>
<li>
<a href="#" title=" ADD YOUR TITLE HERE "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bt3hFbjYEvRvu3fWwQUU43C6kNA4373bORrF8nH0VcqY4qq9cS0-S7NRj-s82sks5s8qcEfT8MDebxzXs7GN7hfRy6yoMtW1P013BhMMJovi8iZtBe-KJQ4cNw-tfbT4bR9m-oVWgQs/s1600/helperblogger.com-1.png" /></a>
<span><h2> ADD CAPTION HERE </h2></span>
</li>
<li>
<a href="#" title=" ADD YOUR TITLE HERE "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuXT-8W5MV8Xxgqhxr9AjxVBmmQmswrBK1k_CROjcynD16edzqSA0Zgezs50lgtbW58dLvwV2rsoTDBBuHwU7G-o3QBrAI493L8bGS961sAo3lvWeEORQiVTGbRGo4RboHM2sj2anSIbY/s1600/helperblogger.com-3.png" /></a> <span><h2> ADD CAPTION HERE </h2></span>
</li>
</ul>
</div>
<div id="progress">
</div>
<div id="overlay">
</div>
<div id="pause">
</div>
</div>
</div>
Customisation
Replace ADD YOUR TITLE HERE ADD CAPTION HERE and Image URL with I highlighted with green blue and red color respectively.
Save It And Enjoy 3d blog :)
No comments:
Post a Comment