Awesome Slider With Progress Bar for Blogger

Awesome Slider With Progress Bar for Blogger

2
data:blog.title
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(http://2.bp.blogspot.com/-Re_ydTtsYMk/UeOxP7OaAHI/AAAAAAAAD8s/elMZYSDL4Pg/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(http://3.bp.blogspot.com/-ZyEfgGR_sYk/UeOyJ91IWlI/AAAAAAAAD88/mDCDFo-E7D4/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(http://1.bp.blogspot.com/-5TMaxDfuurw/UUR18JxEnEI/AAAAAAAAJZw/plHclzT4hZU/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.
Awesome Slider With Progress Bar for Blogger
4 Stars stars - "Awesome Slider With Progress Bar for Blogger" Earlier I have shared with you a simple CSS slider with many effects. And now I am going to sh...

Post a Comment

It's fantastic and working smoothly but only 4 slides are able to be shown . May I know how to add more than 4 slides ?
Many thanks !

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *