Awesome Slider With Progress Bar for Blogger
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 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.
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.
#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;}
/* Awesome Slider by www.bloggerspice.com */
#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.
2 comments
Many thanks !