jQuery Carousel Slider untuk Blogger (FlexSlider)
Mari kita Instal jQuery Carousel Slider Blog Blogger Anda
- Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget
- Pilih HTML / Javascript
- Salin kode di bawah dan paste di atasnya.
<style type="text/css"> /* * jQuery FlexSlider v2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus{ outline:none; } .slides, .flex-control-nav, .flex-direction-nav{ margin:0; padding:0; list-style:none; } /* FlexSlider Necessary Styles *********************************/ .flexslider{ margin:0; padding:0; } .flexslider .slides > li{ display:none; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img{ width:100%; display:block; } .flex-pauseplay span{ text-transform:capitalize; } /* Clearfix for the .slides element */ .flexslider a.intro { bottom:0; color:rgba(0, 0, 0, 0.1); font-size:14px; position:absolute; right:0; text-decoration:none; z-index:99999; } .slides:after{ content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; } html[xmlns] .slides{ display:block; } * html .slides{ height:1%; } /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child{ display:block; } /* FlexSlider Default Theme *********************************/ .flexslider{ margin:0 0 60px; background:#fff; border:4px solid #fff; position:relative; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:0 1px 4px rgba(0,0,0,.2); -moz-box-shadow:0 1px 4px rgba(0,0,0,.2); box-shadow:0 1px 4px rgba(0,0,0,.2); zoom:1; } .flex-viewport{ max-height:2000px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease; } .loading .flex-viewport{ max-height:300px; } .flexslider .slides{ zoom:1; } .carousel li{ margin-right:5px; } /* Direction Nav */ .flexslider li { border: 0 none !important; padding: 0 !important; text-indent: 0 !important; } .flex-direction-nav a{ width:30px; height:30px; margin:-20px 0 0; display:block; background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0; position:absolute; top:50%; cursor:pointer; text-indent:-9999px; opacity:0; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; } .flex-direction-nav .flex-next{ background-position:100% 0; right:-36px; } .flex-direction-nav .flex-prev{ left:-36px; } .flexslider:hover .flex-next{ opacity:0.8; right:5px; } .flexslider:hover .flex-prev{ opacity:0.8; left:5px; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{ opacity:1; } .flex-direction-nav .disabled{ opacity:.3!important; filter:alpha(opacity=30); cursor:default; } /* Control Nav */ .flex-control-nav{ width:100%; position:absolute; bottom:-40px; text-align:center; } .flex-control-nav li{ margin:0 6px; display:inline-block; zoom:1; *display:inline; } .flex-control-paging li a{ width:11px; height:11px; display:block; background:#666; background:rgba(0,0,0,0.5); cursor:pointer; text-indent:-9999px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3); box-shadow:inset 0 0 3px rgba(0,0,0,0.3); } .flex-control-paging li a:hover{ background:#333; background:rgba(0,0,0,0.7); } .flex-control-paging li a.flex-active{ background:#000; background:rgba(0,0,0,0.9); cursor:default; } .flex-control-thumbs{ margin:5px 0 0; position:static; overflow:hidden; } .flex-control-thumbs li{ width:25%; float:left; margin:0; } .flex-control-thumbs img{ width:100%; display:block; opacity:.7; cursor:pointer; } .flex-control-thumbs img:hover{ opacity:1; } .flex-control-thumbs .active{ opacity:1; cursor:default; } </style> <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script> <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", animationLoop: false , itemWidth: 210 , itemMargin: 0 , minItems: 1 , maxItems: 4 }); }); }); </script> <div class="flexslider"> <ul class="slides"> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide1.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide2.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide3.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide4.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide2.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide1.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide4.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide3.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide1.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide4.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide3.jpg " /> </li> <li> <img src=" http://project.dimpost.com/flexslider-carousel/images/slide2.jpg " /> </li> </ul> </div>
4. Simpan, dan dilakukan.
CATATAN:
- Lupakan lebar dan tinggi akan menyesuaikan otomatis.
- Pasang berwarna pink URL gambar dengan URL gambar yang Anda unggah (Anda dapat meng-upload gambar di blogspot, flickr dll)
- Ada beberapa hal lain yang dapat mengubah, lihat di bawah. Saya kira saya tidak perlu menjelaskan bahwa karena mereka diberi nama seperti karena mereka.
animationLoop: false , itemWidth: 210 , itemMargin: 0 , minItems: 1 , maxItems: 4
