Jquery Image Slider Bar For Blogger

Images sliders are routine and lot of can be found now. But difficult to search working versions of image slider. Because several sliders missing jQuery organised files no longer works. Hope this particular tutorial work for you. However, Photo Slider always really helps to make website more attractive. However right now there have large amount of advantages of with it. We can use if with regard to introduce several offers and new services to each of our audience. We can establish awesome images as outlined by our products or services and share with slider.

Currently I'm gonna share awesome about how to add Jquery Photo Slider. Its made out of jQuery and CSS. Each code are effectively arranged. I added five photos just for this slider. You can customize as ones like. Let see, how to incorporate this image slider with regard to blogger.

How to Add jQuery Image Slider

Login to  Blogger go to template >> Edit HTML.

Now Find </head> by Pressing ctrl+F and paste below code just above/before 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(&#39;#bloggertrix_slider&#39;).animatedSlider({
                &#39;loader&#39;:true,
                &#39;width&#39;:900,
                &#39;height&#39;:300,
                &#39;slide_animation_data&#39; :
                    [//slides
                        //slide1 BEGIN
                        [
                            {
                            &#39;target_element&#39;:&#39;.txt1&#39;,
                            &#39;animation_frame&#39;:0,
                            &#39;animation_type&#39;:&#39;tada&#39;
                            },{
                            &#39;target_element&#39;:&#39;.txt2&#39;,
                            &#39;animation_frame&#39;:0.8,
                            &#39;animation_type&#39;:&#39;tada&#39;
                            }
                            ],//slide1 END
                        
                         //slide2 BEGIN
                         [{
                            &#39;target_element&#39;:&#39;img&#39;,
                            &#39;animation_frame&#39;:0,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            },{
                            &#39;target_element&#39;:&#39;p&#39;,
                            &#39;animation_frame&#39;:0.7,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            }],//slide2 END
                           //slide3 BEGIN
                         [{
                            &#39;target_element&#39;:&#39;img&#39;,
                            &#39;animation_frame&#39;:0,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            },{
                            &#39;target_element&#39;:&#39;p&#39;,
                            &#39;animation_frame&#39;:0.6,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            }],//slide3 END

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

                        //slide BEGIN   
                         [{
                            &#39;target_element&#39;:&#39;h1&#39;,
                            &#39;animation_frame&#39;:0,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            },{
                            &#39;target_element&#39;:&#39;p&#39;,
                            &#39;animation_frame&#39;:0.3,
                            &#39;animation_type&#39;:&#39;bounceInUp&#39;
                            }
                         ]//slide END

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

Now Find ]]></b:skin> and paste below code just above/before it.

#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}

Now click on Save template and go Layout.

Click on Add Gadget and Select HTML/JavaScript.

Paste the Following ..

<div id="bloggertrix_slider">
            <div class="slide1">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDHY7z8QLv1UzyiEdyGTasN2xCzx1br00CohC2RbhQL6SH72uQoBXXJ4_be-jUKI28lAWMNNIG5vOmWopmXdEPiB8LTptsheX1U2sz-5u7-g7pI4LTkfRnAkReIbe_wq65Q9iAJTqxYHs/s1600/bloggertrix1.jpg" />
            </div>
            <div class="slide2">
              <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1PF371hmJ3cIU_VrpQ-Ap-pF_PuJWedXiF39Q_mYDepr-q3u6dRzU4UFcQ6hJqk6_MfRElSpGIZkzQ8guE1IByWdFdjVzNxEaSQCkM8GX44kHqVQeueJo6UJK1KM9xB0TLpCqc65pJ-E/s1600/bloggertrix2.jpg" />
            </div>
            <div class="slide3">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEishG_cG6CY3sn9vog8mPXm17fKbKSZZVgi6qv000sLzTPXuACT61mxdcOhlKwHhlik36Yn3183cuG2s-zdb9mU7ccmj3XNL_lFJNTK74fKZ4evVy_ErnOdDxsCJQfjNUs7I0YNOUJWaAU/s1600/bloggertrix3.jpg" />
            </div>
            <div class="slide4">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn3l9hPmzTetMep2VOfLswKDQZ5haMNiIXU_iw0GR3b6MMAh5uNGtrj6yrtBRwtDT0x2LBxwY0QV-Ell8ujgsThFsvMhg-IN3eKdHnzHjz4yWenlnJax5fGT6tDVg_bdh7JUQO3WZw1xw/s1600/bloggertrix4.jpg" />
            </div>
            <div class="slide5">
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJkiS03EvYTbjXv_qQS8LAkEO2k56hTKbKd1pE07WRU9EZW7GkZgewv-u3lYqXEmbj621sTtUiZBTvhQ0uH4uKzBXHIhtiuLzO7efXk8NPwEFGZsX3VpZTrB_164qs8GjjE7Kk_xbX13I/s1600/bloggertrix5.jpg" />    
            </div>
        </div>

Replace Red Color URL with your image URL

Now save it..

You are done..

Please Give Us Your 1 Minute In Sharing This Post!

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Powered By: ITmaza