Animated Bar With Jquery Image Slider For Blogger

Images sliders are common and ton of are available now. But hard to find working versions some times.Because some sliders lost jQuery hosted files and no longer works.Hope this tutorial work for you.However, Photo Slider always helps to make website more attractive.However there have lot of advantages of using it. We can use if for introduce some offers and new products to our audience.We can create awesome images according to our service or product and share with slider.

Today I'm gonna share awesome about how to add Animated Bar With Jquery Image Slider.Its made with jQuery and CSS.Every code are well arranged. I added five photos for this slider. You can customize as your like.However just have a look demo page.You can get a idea about it very well.Let see, how to add this image slider for blogger.

Demo

Some of stylish navigation bars.
           Attractive jQuery Slideshow for Blogger
           jQuery Smooth SlideShow For Blogger
           Stylish jQuery Photo Gallery With Description Effect
           Get All Navigation bars

How to add Animated Bar With Jquery Image Slider For Blogger

1. Go to Blogger Dashboard > Template
2. Backup your template
3. Click on Edit HTML
4. Find </head> and add below code just above it

<link href='https://bloggertrixcode.googlecode.com/files/animate.css' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script src='https://bloggertrixcode.googlecode.com/files/border-slider.js'/>
<script>/****/
            jQuery(document).ready(function(){
            jQuery('#bloggertrix_slider').animatedSlider({
                'loader':true,
                'width':900,
                'height':300,
                'slide_animation_data' :
                    [//slides
                        //slide1 BEGIN
                        [
                            {
                            'target_element':'.txt1',
                            'animation_frame':0,
                            'animation_type':'tada'
                            },{
                            'target_element':'.txt2',
                            'animation_frame':0.8,
                            'animation_type':'tada'
                            }
                            ],//slide1 END

                         //slide2 BEGIN
                         [{
                            'target_element':'img',
                            'animation_frame':0,
                            'animation_type':'bounceInUp'
                            },{
                            'target_element':'p',
                            'animation_frame':0.7,
                            'animation_type':'bounceInUp'
                            }],//slide2 END
                           //slide3 BEGIN
                         [{
                            'target_element':'img',
                            'animation_frame':0,
                            'animation_type':'bounceInUp'
                            },{
                            'target_element':'p',
                            'animation_frame':0.6,
                            'animation_type':'bounceInUp'
                            }],//slide3 END

                          //slide4 BEGIN
                         [{
                            'target_element':'img',
                            'animation_frame':0,
                            'animation_type':'bounceInUp'
                            },{
                            'target_element':'p',
                            'animation_frame':0.5,
                            'animation_type':'bounceInUp'
                            }],//slide4 END
                        //slide5 BEGIN
                         [{
                            'target_element':'img',
                            'animation_frame':0,
                            'animation_type':'bounceInUp'
                            },{
                            'target_element':'p',
                            'animation_frame':0.4,
                            'animation_type':'bounceInUp'
                            }],//slide5 END

                        //slide BEGIN
                         [{
                            'target_element':'h1',
                            'animation_frame':0,
                            'animation_type':'bounceInUp'
                            },{
                            'target_element':'p',
                            'animation_frame':0.3,
                            'animation_type':'bounceInUp'
                            }
                         ]//slide END

                    ]});});
        </script>
    <link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'/>

5. Again Find ]]></b:skin> and add below code just above it

/* The CSS Code for the slider starts here bloggertrix.com
#bloggertrix_slider {margin:0 auto;}
#bloggertrix_slider .slider-contents {overflow:hidden;border:8px solid #DDDDDD;box-shadow:0 0 3px rgba(3,3,3,0.5);}
#bloggertrix_slider .slide-nav {float:left;padding: 0 8px;height: 26px;background: #3a3a3a;}
#bloggertrix_slider .slide-nav a {width: 14px;height: 14px;text-indent: -999px;float: left;list-style: none;display: block;background: #dddddd;margin: 5px 4px;cursor: pointer;}
#bloggertrix_slider .slide-nav a:hover {
background: #27BAFF !important;}
#bloggertrix_slider .progress-bar {width:0px;background-color:#AAAAAA;height:2px;top: -2px;overflow:visible !important;display:block !important;position: relative;}
#bloggertrix_slider .controls {height: 26px;margin: 4px auto 0;display: table;}
#bloggertrix_sliderr .pause-play-control {width: 46px;height: 26px;float: left;background: #3A3A3A;color: #fff;}
#bloggertrix_slider .pause-play-control a {width:9px;height: 19px;display:block;overflow:hidden;text-indent: -9999px;background:url('http://img837.imageshack.us/img837/7647/fqnu.png');cursor: pointer;margin:3px auto 0;}
#bloggertrix_slider .pause-play-control a.play-slide {background-position:-5px -3px;}
#bloggertrix_slider .pause-play-control a.pause-slide {background-position:-29px -3px;}
#bloggertrix_slider .slider-next,#bloggertrix_slider .slider-prev {
width: 46px;height: 46px;background: #3a3a3a;display: block;font-size: 41px;color: #FFF;font-weight: bold;text-align: center;position: absolute;cursor: pointer;text-indent: -999px;overflow: hidden;}
#bloggertrix_slider .slider-next:before,#bloggertrix_slider .slider-prev:before {background: #3a3a3a url('http://img837.imageshack.us/img837/7647/fqnu.png');width:32px;height:32px;position:relative;top:7px;left:7px;content:'';display:block;}
/*#bloggertrix_slider .slider-next {margin: -220px 0 0 681px;}
#bloggertrix_slider .slider-prev {margin: -220px 0 0 4px;}*/
#bloggertrix_slider .slider-next:before {background-position:-5px -31px;}
#bloggertrix_slider .slider-prev:before {background-position:-5px -70px;}
.slide1 img {position:relative;}
.img-logo {margin-left: 150px;}
.img-mobile {margin-top: 45px;}
.img-tablet {margin: -168px 0 0 139px;}
.img-laptop {margin: -186px 0 0 349px;}
.slide1 {background-color: #67b608}
.slide2 {background-color: #03bbd3}
.slide3 {background-color: #cf6b30}
.slide4 {background-color: #f2a87b}
.slide5 {background-color: #388efd}

6. Now Click Save Template and Go to blogger Layout
7. Click Add Gadget and select 'HTML/Javascript'
8. Paste below code.

<div id="bloggertrix_slider">
            <div class="slide1">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia9L0IXr4l6CuW7h3BIydzlJermk4DDJIlRPjgQj6oBaDQ5xS4VA3fXPuka-UOGTot8dD_auXAFMVYmLP8ocFp3dBCDbn-PIUXAPNfDOgeZqobqaFMQk6yvhuv33htfy_NqyOcTQuyfno/s1600/bloggertrix1.jpg" />
            </div>
            <div class="slide2">
              <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXkBLl8QkYN-uREJDcq6jBPFfQtmdzI9FnA6Is6AA9kNZ62V26ybI3yq4LJOAqk8MCOt4TxSgucQp3sAISrNUYs4z2wcn2DEoZ9FVwYzWgoff6g1BvirY-ZHy9EuWMRdw6s1G-Gr-Aoig/s1600/bloggertrix2.jpg" />
            </div>
            <div class="slide3">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5nq41CTXl04lQl1OmkllYSX_E9VPYuBINgXHOEDYMd-_zEV6bMxgPHRFm16EgxyXzP3DE4ukdH0NPs0ogt8zNZGqkrI-9jMoaD2waU0RoXYuT2sMN6gUUUX__QuqBJSArTkB_-ZKep9w/s1600/bloggertrix3.jpg" />
            </div>
            <div class="slide4">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJe9iJishYqvKW4HvvTgREGPPD5wC5_jZfKKhEx0u84E_TUFbHtaKTJR3JvQqeBJ4-SJc53XYF423PwiTVdSb4eL7BWueI2gWwdmE0kZlgMugkKk7_wWJiacb6Nm_KHuim8shi8rInVxs/s1600/bloggertrix4.jpg" />
            </div>
            <div class="slide5">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwu2rzI9-nUcXGiK34rCCzlfkpihl56xrhGsgB-c4vYrvDL4F1esr1wOBbkykzAuZrNFEqDOFPgPwVpvAopcE3m8jfIKTeRRpIBvnP3mfVwGbLHA-auvT7tDlTpbs26l8a58Bvkpro2l0/s1600/bloggertrix5.jpg" />
            </div>
        </div>

Replace Red color URL with your image links

9. Now save your HTML/Javascript'.

You are done. If you have any problem related to this Animated Bar With Jquery Image Slider. Just leave a comment.I will help to you.