Awesome Slider With Progress Bar for Blogger

Awesome Slider With Progress Bar for Blogger
CSS slider

Earlier I have shared with you a simple CSS slider with many effects. And now I am going to share another Slider which is really awesome. This slider is little different than previous one. I have added a program bar when sliding image will change then the progress bar will complete loading. You would see when you mouse over on the slider then a pause button will appear as well as the slider will pause.  A beautiful image border added and it will change color on mouse over as well as you would see a shadow of the slider below frame. This slider build on complete CSS coding, not added any heavy javascript file. Whole code depend of moz and webkit transition affect. For using the slider you must use image with 600 X 200 px wide. You can use any image resizer to make the perfect size. This slider also able to display post caption within a transparent section. Hope it will help to beautify  your blog. See the Demo from below before proceed to the tutorial.

Live Demo



Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> by Pressing   Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates. 



/* Awesome Slider by www.bloggerspice.com */ 
#BloggerSpiceAwesomeSlider {    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;}
#BSmask {    overflow: hidden;}
#BloggerSpiceAwesomeSlider:hover {    background-color: #fff;    border: 10px solid #00477D;}
#BloggerSpiceAwesomeSlider:hover #BSpause {    opacity: 1;}
#BloggerSpiceAwesomeslider:hover #BSprogress {    background-color: rgba(8,8,8,0.0);}
#BloggerSpiceAwesomeSlider:hover ul, #BloggerSpiceAwesomeSlider:hover #BSprogress, #BloggerSpiceAwesomeSlider:hover {    -moz-animation-play-state: paused;    -webkit-animation-play-state: paused;}
#BSpause {    width: 600px;    height: 200px;    position: absolute;    top: 0;    opacity: 0;    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrjNgus6EmJU8oNlPG-xLeuLYTuoJzmJNO8cFZNOVuCW_IKCwMLo32X0cz39jIRYm6dqzRsa54LGo7TsLs6S8EgbZGu05D1yNOyp6zPw5XPrA09I8a16a3PAathoD0h5NyvsvNcbgaFfc/s1600/BS+pause.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;}
#BSprogress {    width: 2px;    height: 5px;    background-color: #0066B3;    -moz-animation: BSprogress 18s infinite;    -webkit-animation: BSprogress 18s infinite;    position: relative;    top: -1px;    -moz-transition: all 150ms ease-in;    -webkit-transition: all 150ms ease-in;    -o-transition: all 150ms ease-in;}
#BloggerSpiceAwesomeSlider 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;}
#BloggerSpiceAwesomeSlider 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/AVvXsEhT2MwKUoeV0dQzoob1peDawbJexSdwKmON7ELp81HeB69ao5rtGo_k7ogpuRQ932tAVgjTn4TxY_bZPMwWJdUmaDAgeVhNgpF5-db7yIVp1KrAVbq26QbQWuSE1M4X_jz1CLvxn2zTQErD/s1600/BS+loading.gif);    background-position: 50% 50%;    background-repeat: no-repeat;}
#BloggerSpiceAwesomeSlider li:last-of-type {    background-color: #362c30;}
#BloggerSpiceAwesomeSlider li a {    display: block;    text-decoration: none;}
#BloggerSpiceAwesomeSlider 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;}
#BloggerSpiceAwesomeSlider-shadow {    width: 100%;    height: 260px;    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCi2_dsM0Tn8g-Nf0dFF7oYPhHjh0QFaCmVgZRFc0VoqzTG8DlJmXzHWdJ2ifIMF2kpsFcoqEZ6drF0UI2SY1HgH5GBd0LpIeTUH_otP0rKzr5IXGtRteNfSey1cD57bUoF7jbuZIN0IvJ/s1600/shadow-namkna-blogspot-com-v2.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 BSprogress {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 BSprogress {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;}}
#BloggerSpiceAwesomeSlider 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;}


Step 5 Now Find this code <div id='main-wrapper'> by Pressing   Ctrl + F


Step 6 Now Paste the Below code above <div id='main-wrapper'>



<div id="BloggerSpiceAwesomeSlider-shadow"> <div id="BloggerSpiceAwesomeSlider">      <div id="BSmask">       <ul><!-- Awesome slider by www.bloggerspice.com -->        <li>         <a href="#" title="Img Alter Text"><img src="Image URL Here" /></a><span><h2>ADD CAPTION HERE</h2></span>        </li><!-- Awesome slider by www.bloggerspice.com -->        <li>         <a href="#" title=" Img Alter Text "><img src=" Image URL Here " /></a>         <span><h2> ADD CAPTION HERE </h2></span>        </li><!-- Awesome slider by www.bloggerspice.com --><li>         <a href="#" title=" Img Alter Text "><img src=" Image URL Here " /></a><span><h2> ADD CAPTION HERE </h2></span>        </li><!-- Awesome slider by www.bloggerspice.com--><li>         <a href="#" title=" Img Alter Text "><img src=" Image URL Here " /></a><span><h2> ADD CAPTION HERE </h2></span>        </li>       </ul>   </div>      <div id="BSprogress">      </div>      <div id="BSpause">      </div> </div></div>

Customization


  • Replace # with Post URL.
  • Replace Image URL Here  with Post Image URL.
  • Change Img Alter Text with Image alternative text.
  • Change ADD CAPTION HERE with Post name.
Go Up