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.
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.
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'/>5. Again Find ]]></b:skin> and add below code just above it
<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'/>
/* 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">Replace Red color URL with your image links
<div class="slide1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaMoMafCA0Ky7s-aMPAldLbB_8eFe-W95q7frluf_kIg8-OffYzqtBK6_srREJVjSZjnpZk4puYnD9ZFFgfiLa3tWqLdNnbjbWTI9SEqzH_IWpuUvr58oeGr0fa0VkisI3lVAr61fgsrc/s1600/bloggertrix1.jpg" />
</div>
<div class="slide2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6kDdW3xkQPQtYiGmBLdAObdvDjambBGGzFHdOFAJgq10qDvarWj2Vh5w2kHJwcxKEr-VlMeNaL1eyaTe1Dqe8joGwnOuLXjEbxFEhqCjdMAWEglOlkE46JtU4j8dwgg_hSUQMJFDHMA/s1600/bloggertrix2.jpg" />
</div>
<div class="slide3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc3CbvwBRn_msqKWPn5gztGGmMcYkQiq1JXBpcLNx06_wH1HgLvD-Nt_5Ui8UNCmaNBZFRGfCh7r6ySC5GIzxiSRxxYzyBQLOLFJdVCycjnD4uzUwsmB0KOt_5x1JxFHnNORx6QpLFvGc/s1600/bloggertrix3.jpg" />
</div>
<div class="slide4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvhJX9iJ7eJMVqEqM-8kt-kqWGvgBer2G8XfggG_E47B1PDP2EYAvH0wP3VCbLfhRD3R0uCCjLvwaApl0542DSHq0xaUDkj-3JRY9Mm1pv7RjnjMVeqo8RkGWWom9cTvRKFwPXwggrC_g/s1600/bloggertrix4.jpg" />
</div>
<div class="slide5">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGRBArFiW-IoKE-zb71Lxs0iW0lUDZ2MVAUObGBpqJiB3ZdlTwPsFkFWNTCTwi_XslK87GtmW5ntaQ0fAA8rZIagQPcXceWStXg0YIYHV84Dc814cLjhfn132lZhUCJKqUR83BSJqp3Ys/s1600/bloggertrix5.jpg" />
</div>
</div>
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.
0 comment:
Post a Comment