Thursday, December 13, 2012

How To Add Css3 Fade Slide Show For Blogger

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

Css3+fade+slider

Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

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="http://2.bp.blogspot.com/-y601bZlOrTY/UMlNLI19xlI/AAAAAAAAF6c/gEhYi1QAB5E/s1600/bloggertrix-pic1.jpg" alt="image01" />
                    <div>Title 1</div>
                </li>
                <li><img src="http://1.bp.blogspot.com/-uaVXxxiuKFQ/UMlNMHYksDI/AAAAAAAAF6g/4A9waR5guL0/s1600/bloggertrix-pic2.jpg" alt="image02" />
                    <div>Title 2</div>
                </li>
                <li><img src="http://1.bp.blogspot.com/-Z3K_KI1Ji3o/UMlNMy6bvZI/AAAAAAAAF6o/dfKEEnstXTM/s1600/bloggertrix-pic3.jpg" alt="image03" />
                    <div>Title 3</div>
                </li>
                <li><img src="http://4.bp.blogspot.com/-qKUVh1bbZnQ/UMlNNk8DSzI/AAAAAAAAF6w/-OmZOb-QlWY/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...

8 comments:

  1. Replies
    1. Check it correctly.already added the demo under the image.

      Delete
  2. Can we add link to the images or title ?

    ReplyDelete
  3. how to add link on "Title"?

    please help me........

    ReplyDelete
    Replies
    1. Contact me via contact us page, it will easy to send new code for you.

      Delete
  4. Incredible 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.

    ReplyDelete