In this post, im gonna explain, how to add nice fade slider with using Css3 and HTML.Actually
Slideshow make your blog attractive, you can add some blog related image for slideshow. Its
included moving title too.So it will make your blog attractive.Try to add to your blog. its easy.
Get my earlier slideshow post here
Demo
1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5. Find this tag by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag
7. Go to blogger and click Layout
8. Click Add Gadget and select 'HTML/Javascript
9. Paste below code.
10. Now save your HTML/Javascript'.
You are done...
Slideshow make your blog attractive, you can add some blog related image for slideshow. Its
included moving title too.So it will make your blog attractive.Try to add to your blog. its easy.
Get my earlier slideshow post here
1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5. Find this tag by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag
/* fade slider www.bloggertrix.com*/ .slides { height:300px; margin:50px auto; overflow:hidden; position:relative; width:600px; } .slides ul { list-style:none; position:relative; } /* keyframes #anim_slides */ @-webkit-keyframes anim_slides { 0% {opacity:0;} 6% {opacity:1;} 24% {opacity:1;} 30% {opacity:0;} 100% {opacity:0;} } @-moz-keyframes anim_slides { 0% {opacity:0;} 6% {opacity:1;} 24% {opacity:1;} 30% {opacity:0;} 100% {opacity:0;} } .slides ul li { opacity:0; position:absolute; top:0; /* css3 animation */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } /* css3 delays */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div { -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; } .slides ul li:nth-child(3), .slides ul li:nth-child(3) div { -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; } .slides ul li:nth-child(4), .slides ul li:nth-child(4) div { -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; } .slides ul li img { display:block; } /* keyframes #anim_titles */ @-webkit-keyframes anim_titles { 0% {left:100%; opacity:0;} 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } @-moz-keyframes anim_titles { 0% { left:100%; opacity:0; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } .slides ul li div { background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFFFFF; font-size:26px; left:10%; margin:0 auto; padding:20px; position:absolute; top:50%; width:200px; /* css3 animation www.bloggertrix.com*/ -webkit-animation-name: anim_titles; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_titles; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; }
7. Go to blogger and click Layout
8. Click Add Gadget and select 'HTML/Javascript
9. Paste below code.
<div class="slides"> <ul> <!-- slides --> <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic1SeO2a-Y6wMwigAUIeCMoVQFNUM2rlB_j1JLDCwBxGVZDPX9T1YYHogPEEae5K3oC7ZA0WedEW90ZU4a2pfzmxQLoAVuTN5zLWR_SxQUfMpkQlXZ3B2fx0BkIfKN3YeRhhHmKSh2NUs/s1600/bloggertrix-pic1.jpg" alt="image01" /> <div>Title 1</div> </li> <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxtyrJTU9ey_jQuDP0zE3RacvApuuo44R_godcl9REwbzXkQ5bL48xqFuGBUDoV8RSqKHoQweKW9qE4LlEUgoxxbGKsHmIqDRPXwx-q1J1q-TWcTWTI010fO-2Rc7Y3SCPvVUYVXxLi3Y/s1600/bloggertrix-pic2.jpg" alt="image02" /> <div>Title 2</div> </li> <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXCTSTcgJTWfmRqxWFPWBfJO3gYdx8l24Lvg6tQvG6VqAZuIaAFRw9Uo6jyLBR6j_gk4uX8uKpccBU7aqOyRqUQP8gLNquGf4-ZXPseoVLCmAr4JLDXGSW2Xnn20ohuT8DSyl55kZiNHI/s1600/bloggertrix-pic3.jpg" alt="image03" /> <div>Title 3</div> </li> <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEegHOr-iLgm0rkbnxBsoPxIQFioGNctdm-oKOFejalHRf8Ydy58DxQwMGCTrYNBNJfLQj24ayF3buFPjWu2JIMpgy18-nsJDqGoEo2xpU66dh9xt8Ghjm2CfFrmwExL4xtCSkwp3Z5zc/s1600/bloggertrix-pic4.jpg" alt="image04" /> <div>Title 4</div> </li> </ul> </div>Replace Title and image links.
10. Now save your HTML/Javascript'.
You are done...
where's the demo :)
ReplyDeleteCheck it correctly.already added the demo under the image.
DeleteCan we add link to the images or title ?
ReplyDeleteYes you can,need any help?
Deletehow to add link on "Title"?
ReplyDeleteplease help me........
Contact me via contact us page, it will easy to send new code for you.
DeleteIncredible points is found below using excellent content material, superb way with words-at all. I do not recognize how put it into practice but don’t stop! For those as if you occur on the internet.
ReplyDeleteThanks for your comment dude.
Delete