Here I
came up with a stylish pure CSS3 image slider for blogger. The slider is easier
to customize for newbie, with a basic knowledge HTML and CSS. This stylish slider is created by smashingmagazine.
The blogger version is here, now just need to follow few easy steps to install this slider on blogspot blog.
How to add this stylish
pure CSS3 image slider to blogger?
-
Cougar
-
Lions
-
Snowalker
-
Howling
-
Sunbathing
STEP #1: Log on to Blogger.
STEP #2: Go to Dashboard > Layout
STEP #3: Click on Add a Gadget
STEP #4: Select HTML/Java Script widget
STEP #5: Paste the following code inside it
<style type="text/css" media="screen">.container {margin: 0 auto;overflow: hidden;width: 700px;}#content-slider {height: 335px;width: 100%;}#slider {background: none repeat scroll 0 0 #000000;border: 5px solid #FFFFFF;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);height: 320px;margin: 10px auto;overflow: visible;position: relative;width: 680px;}#mask {height: 320px;overflow: hidden;}#slider ul {margin:0;padding:0;position:relative;}#slider li {width:680px;height:320px;position:absolute;top:-325px;list-style:none;}#slider li.firstanimation {-moz-animation:cycle 25s linear infinite;-webkit-animation:cycle 25s linear infinite;}#slider li.secondanimation {-moz-animation:cycletwo 25s linear infinite;-webkit-animation:cycletwo 25s linear infinite;}#slider li.thirdanimation {-moz-animation:cyclethree 25s linear infinite;-webkit-animation:cyclethree 25s linear infinite;}#slider li.fourthanimation {-moz-animation:cyclefour 25s linear infinite;-webkit-animation:cyclefour 25s linear infinite;}#slider li.fifthanimation {-moz-animation:cyclefive 25s linear infinite;-webkit-animation:cyclefive 25s linear infinite;}#slider .tooltip {background:rgba(0,0,0,0.7);width:300px;height:60px;position:relative;bottom:75px;left:-320px;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;}#slider .tooltip h1 {color:#fff;font-size:24px;font-weight:300;line-height:60px;padding:0 0 0 20px;}#slider li#first:hover .tooltip,#slider li#second:hover .tooltip,#slider li#third:hover .tooltip,#slider li#fourth:hover .tooltip,#slider li#fifth:hover .tooltip {left:0px;}/* PROGRESS BAR */.progress-bar {position:relative;top:-5px;width:680px;height:5px;background:#000;-moz-animation:fullexpand 25s ease-out infinite;-webkit-animation:fullexpand 25s ease-out infinite;}/* ANIMATION */@-moz-keyframes cycle {0% { top:0px; }4% { top:0px; }16% { top:0px; opacity:1; z-index:0; }20% { top:325px; opacity:0; z-index:0; }21% { top:-325px; opacity:0; z-index:-1; }92% { top:-325px; opacity:0; z-index:0; }96% { top:-325px; opacity:0; }100%{ top:0px; opacity:1; }}@-moz-keyframes cycletwo {0% { top:-325px; opacity:0; }16% { top:-325px; opacity:0; }20% { top:0px; opacity:1; }24% { top:0px; opacity:1; }36% { top:0px; opacity:1; z-index:0; }40% { top:325px; opacity:0; z-index:0; }41% { top:-325px; opacity:0; z-index:-1; }100%{ top:-325px; opacity:0; z-index:-1; }}@-moz-keyframes cyclethree {0% { top:-325px; opacity:0; }36% { top:-325px; opacity:0; }40% { top:0px; opacity:1; }44% { top:0px; opacity:1; }56% { top:0px; opacity:1; }60% { top:325px; opacity:0; z-index:0; }61% { top:-325px; opacity:0; z-index:-1; }100%{ top:-325px; opacity:0; z-index:-1; }}@-moz-keyframes cyclefour {0% { top:-325px; opacity:0; }56% { top:-325px; opacity:0; }60% { top:0px; opacity:1; }64% { top:0px; opacity:1; }76% { top:0px; opacity:1; z-index:0; }80% { top:325px; opacity:0; z-index:0; }81% { top:-325px; opacity:0; z-index:-1; }100%{ top:-325px; opacity:0; z-index:-1; }}@-moz-keyframes cyclefive {0% { top:-325px; opacity:0; }76% { top:-325px; opacity:0; }80% { top:0px; opacity:1; }84% { top:0px; opacity:1; }96% { top:0px; opacity:1; z-index:0; }100%{ top:325px; opacity:0; z-index:0; }}@-webkit-keyframes cycle {0% { top:0px; }4% { top:0px; }16% { top:0px; opacity:1; z-index:0; }20% { top:325px; opacity:0; z-index:0; }21% { top:-325px; opacity:0; z-index:-1; }50% { top:-325px; opacity:0; z-index:-1; }92% { top:-325px; opacity:0; z-index:0; }96% { top:-325px; opacity:0; }100%{ top:0px; opacity:1; }}@-webkit-keyframes cycletwo {0% { top:-325px; opacity:0; }16% { top:-325px; opacity:0; }20% { top:0px; opacity:1; }24% { top:0px; opacity:1; }36% { top:0px; opacity:1; z-index:0; }40% { top:325px; opacity:0; z-index:0; }41% { top:-325px; opacity:0; z-index:-1; }100%{ top:-325px; opacity:0; z-index:-1; }}@-webkit-keyframes cyclethree {0% { top:-325px; opacity:0; }36% { top:-325px; opacity:0; }40% { top:0px; opacity:1; }44% { top:0px; opacity:1; }56% { top:0px; opacity:1; z-index:0; }60% { top:325px; opacity:0; z-index:0; }61% { top:-325px; opacity:0; z-index:-1; }100%{ top:-325px; opacity:0; z-index:-1; }}@-webkit-keyframes cyclefour {0% { top:-325px; opacity:0; }56% { top:-325px; opacity:0; }60% { top:0px; opacity:1; }64% { top:0px; opacity:1; }76% { top:0px; opacity:1; z-index:0; }80% { top:325px; opacity:0; z-index:0; }81% { top:-325px; opacity:0; z-index:-1; }100%{ top:-325px; opacity:0; z-index:-1; }}@-webkit-keyframes cyclefive {0% { top:-325px; opacity:0; }76% { top:-325px; opacity:0; }80% { top:0px; opacity:1; }84% { top:0px; opacity:1; }96% { top:0px; opacity:1; z-index:0; }100%{ top:325px; opacity:0; z-index:0; }}/* ANIMATION BAR */@-moz-keyframes fullexpand {0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }}@-webkit-keyframes fullexpand {0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }}</style><div class="container"><div id="content-slider"><div id="slider"><div id="mask"><ul><li id="first" class="firstanimation"><a href="#"><img src="https://photos-2.dropbox.com/t/0/AACletMHiB5RDu7scdHybtZn1J84DdnVYOFp2vClFqV8mw/12/114983599/jpeg/32x32/3/_/1/2/img_1.jpg/jI0Y-OV8Ii2nsbj7-KSOK9UCizOuwrk8AjElCPyooEk?size=1280x960" alt="Cougar"/></a><div class="tooltip"><h1>Cougar</h1></div></li><li id="second" class="secondanimation"><a href="#"><img src="https://photos-5.dropbox.com/t/0/AAB9ux-gGfKsrns3M5UTITfcVRvg5YZ8z6ohGxKoIhJ_Mw/12/114983599/jpeg/32x32/3/_/1/2/img_2.jpg/2fGa00YxrB9USJINnFxs5BwniOkjYpul4Mu7Z7ep7so?size=1280x960" alt="Lions"/></a><div class="tooltip"><h1>Lions</h1></div></li><li id="third" class="thirdanimation"><a href="#"><img src="https://photos-5.dropbox.com/t/0/AACyhTmspajGxB8qVYKpSL_rZOQhxUMNg_Ur5u-UyL02Vg/12/114983599/jpeg/32x32/3/_/1/2/img_3.jpg/V-QBBPV7b9PKrslsLKhm32Gxl-x5v6mAds2KBOyVJZ0?size=1280x960" alt="Snowalker"/></a><div class="tooltip"><h1>Snowalker</h1></div></li><li id="fourth" class="fourthanimation"><a href="#"><img src="https://photos-6.dropbox.com/t/0/AABQwBjsZsxIkrcuNEYfeNySBKxFRA1SDJ2Sy4mX5b4GEA/12/114983599/jpeg/32x32/3/_/1/2/img_4.jpg/6Mk_YHVJ8gylCijXOh1ykUIcjN9bgW5saKZ405QQjCs?size=1280x960" alt="Howling"/></a><div class="tooltip"><h1>Howling</h1></div></li><li id="fifth" class="fifthanimation"><a href="#"><img src="https://photos-4.dropbox.com/t/0/AAACsagvDkXcGEnvSs1Zyh9TGD4KJ8GyGvowzJyuTFNg2w/12/114983599/jpeg/32x32/3/_/1/2/img_5.jpg/Xmr5FIGoFg0m0hj_ScGqQlufvn3b4hlh0CC7y3yTfaI?size=1280x960" alt="Sunbathing"/></a><div class="tooltip"><h1>Sunbathing</h1></div></li></ul></div><div class="progress-bar"></div></div></div></div>
Customization:
- Change the blue colored link with yours and red colored images link with your images.
STEP #6: Now Save the template.
So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.
{ 0 comments... read them below or add one }
Post a Comment