Ini adalah responsif jQuery gambar slider. slider sederhana tapi menakjubkan ini dikembangkan oleh woothemes.com. Ini memiliki beberapa fitur yang sangat bagus yang membuat Anda seperti itu. Fitur yang paling keren adalah hal ini sangat responsif dan ringan; Anda tidak perlu tegang tentang slider lebar / tinggi bahkan semua gambar lebar dan tinggi menyesuaikan secara otomatis.
Di sini adalah khusus untuk blogger / blogspot sehingga Anda hanya dapat menyalin dan menyisipkan kode untuk diinstal pada blog blogger Anda.
Lihat demo
Mari Pasang Gambar Slider responsive Widget di Blogger
- Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget Pilih HTML / Javascript
- Salin kode di bawah ini dan paste di atasnya.
<style type="text/css">
/*
* jQuery FlexSlider v2.2.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 li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
margin-bottom: 0 !important;
}
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
#flex-isfb {
overflow: hidden;
position: relative;
min-height: 200px;
padding: 3px;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
width: 100%;
display: block;
}
.flexslider .slides,
.flexslider .slides img,
.flex-direction-nav {
margin: 0 !important;
padding: 0 !important;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after {
content: "\0020";
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;
-o-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);
-o-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 */
.flex-direction-nav {
*height: 0;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 40px;
height: 45px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
.flex-direction-nav .flex-prev {
background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -92px transparent;
left: -50px;
}
.flex-direction-nav .flex-next {
background: url("http://project.dimpost.com/flexslider-basic/img/arrows1.png") no-repeat scroll -15px -15px transparent;
right: -50px;
text-align: right;
}
.flexslider:hover .flex-prev {
opacity: 0.5;
left: 10px;
}
.flexslider:hover .flex-next {
opacity: 0.5;
right: 10px;
}
.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
opacity: 0.9;
}
/* Pause/Play */
.flex-pauseplay a {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: #000;
}
.flex-pauseplay a:before {
font-family: "flexslider-icon";
font-size: 20px;
display: inline-block;
content: '\f004';
}
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-pauseplay a.flex-play:before {
content: '\f003';
}
/* 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;
-o-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);
-o-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 .flex-active {
opacity: 1;
cursor: default;
}
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {
opacity: 1;
left: 10px;
}
.flex-direction-nav .flex-next {
opacity: 1;
right: 10px;
}
}
</style>
<div id="flex-isfb">
<div id="preloader"></div>
<style>
#preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 999999999999;
}
</style>
<div class="flexslider">
<ul class="slides">
<li>
<a href="http://blogsmanado.blogspot.co.id/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3izBDXGudkgKlpdRdpFXEymDr2ZJXkbxAF8SqY8LbHPOCokA_LLDlSEjPvfywLxgLcyesm1pOASPQcmRhI0T9CVTnSGFstpGLDsMeuVbX45fiWFcZHIxfViyaxKzuxPOPiLaZkLj0_Xz0/s320/slide1.jpg" />
</a>
</li>
<li>
<a href="http://blogsmanado.blogspot.co.id/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkbwNQnc5YXBCi_y-AVy7hyphenhyphenePTjCYroYKYYFACZQOwTnbQlXZZjfuRuAdn0QhR1bhi-aY6cCk491ZYMl6yLjsW5VkgPsflv_CgDSIrGCTvnNEBgJP9rWiPhIVwwgo7F6oteXH46W8cPPj/s320/slide2.jpg" />
</a>
</li>
<li>
<a href="http://blogsmanado.blogspot.co.id/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3d2t2Vg7Njl5HQuwp_SXG_A4vl0-BNVcHKIo_3ixpXUi6kIfOc4kEpUXtMy5TCfgvmq0Oo_28OJRuWL_99RLGtfoVv_qHXXU4ny_hoi1vnxPoPbSshtQEFb-Eyldks7to3oyirQ86oIgj/s320/slide3.jpg" />
</a>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://project.dimpost.com/flexslider-basic/js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: true,
directionNav: true,
easing: "swing",
slideshowSpeed: 3000,
animationSpeed: 600,
});
});
</script>
<script type="text/javascript">
$(window).load(function() {
$('#preloader').delay(350).fadeOut('slow');
})
</script>
3. Menyimpan, dan kita selesai.
CATATAN:
Lupakan lebar slider dan tinggi, itu akan menyesuaikan secara otomatis.
Mengganti gambar slider (pencarian <img src) dengan gambar yang Anda unggah (Anda dapat meng-upload gambar di blogspot, flickr dll)
Ada beberapa hal lain yang mungkin ingin bermain dengan, lihat di bawah. Saya kira saya tidak perlu menjelaskan bahwa karena mereka diberi nama seperti karena mereka. Bermain dengan mereka ...
$('.flexslider').flexslider({
animation: "slide",
controlNav: true,
directionNav: true,
easing: "swing",
slideshowSpeed: 3000,
animationSpeed: 600,
});
Selamat bersenang-senang! Jangan lupa untuk mengucapkan terima kasih...
0 Response
Post a Comment