FlexSlider merupakan salah satu jenis Slider yang memiliki efek Flex (fleksibel/ tidak kaku). Tutorial kali ini didapat dari salah satu post shuvojitdas.com, yang mana dalam postingannya ia memasangkan Slider ini pada widget. Nah, di postingan kali ini, YaMimpih! akan berbagi tutorial untuk memasang Slider tersebut pada postingan blogger.
Kalau kalian ingin memasang Slider ini sebagai widget, kalian bisa baca tutorialnya di Cara Memasang Widget FlexSlider Image Pada Blogger.
Oke, langsung saja ikuti langkah berikut.
1. Copy kode dibawah ini, lalu paste di atas kode </b:skin>
<!-- SLIDER CSS -->
<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>
<!-- SLIDER HTML -->
<div id="flex-isfb">
<!-- Preloader -->
<div id="preloader"></div>
<style>
/* Preloader */
#preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
/* change if the mask should have another color then white */
z-index: 999999999999;
/* makes sure it stays on top */
}
</style>
2. Lalu copy kode dibawah ini, lalu paste di atas </head>
<!-- SLIDER JS -->
<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">
//<![CDATA[
$(window).load(function() {
$('#preloader').delay(350).fadeOut('slow');
})
//]]></script>
3. Oke, script sudah terpasang. Hal terakhir yang perlu kalian lakukan adalah membuat postingan dengan HTML. Copy kode dibawah, lalu paste pada tab post HTML.
Untuk mengganti gambar ganti url https://images.alphacoders.com/705/thumb-1920-705142.png dengan url gambar yang ingin kalian taruh pada slider.
Lalu untuk memberi link pada gambar, ganti url https://yamimpih.blogspot.com dengan url yang kalian inginkan.
<div class="flexslider">
<ul class="slides">
<li><a href="https://yamimpih.blogspot.com"><img src="https://images.alphacoders.com/705/thumb-1920-705142.png" /></a></li>
<li><a href="https://yamimpih.blogspot.com"><img src="https://images5.alphacoders.com/700/thumb-1920-700733.png" /></a></li>
<li><a href="https://yamimpih.blogspot.com"><img src="https://images8.alphacoders.com/691/thumb-1920-691314.png" /></a></li>
</ul>
</div>
Sekian tutorial dari YaMimpih! Bila ada yang ingin kalian tanyakan, silakan komentar di bawah ya.
Selamat mencoba!
