Cara membuat slider responsive di blogspot
Cara memasang slider responsive di blogspot | Slider merupakan salah satu bagian dari website atau blog yang sangat berguna sekali. Slider akan mempercantik template suatu blog atau website, sehingga pengunjung merasa betah, disamping blog tidak terkesan monoton.Akan tetapi beberapa plugin untuk slider biasanya menggunakan javascript yang akan membebani loading blog, terutama plugin slider yang mempunyai bermacam-macam efek. Akibatnya pada saat membuka halaman blog akan terasa lama dan yang jelas pengunjung akan kabur sebelum sempat membuka artikel kita, hahahahaha... Dan hal ini akan berdampak buruk bagi SEO.
Namun plugin yang akan saya bagikan ini merupakan plugin yang ringan serta responsive. Plugin ini dinamakan Flexslider. Mau tahu cara memasangnya? Silakan simak tutorial berikut ini.
Cara memasang plugin flexslider di blogspot
1. Buka Blogger.com lalu pilih template kemudian Edit Template
2. Cari </b:skin> atau bisa juga </style> yang berada di atas </head> jika sobat sedang menggunakan template valid HTML5.
3. Silakan copy paste kode CSS dibawah ini diatas </b:skin>
/* 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;} /* 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;}
}
4. Kemudian simpan template sobat.5. Buka Tata Letak kemudian pilih tambahkan Gadget lalu cari HTML/javascript.
6. Copy paste kode HTML berikut ke dalam Gadget tersebut.
<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>
<div class="flexslider">
<ul class="slides">
<li>
<a href="#">
<img src="url-gambar-anda" />
</a>
</li>
<li>
<a href="#">
<img src="url-gambar-anda" />
</a>
</li>
<li>
<a href="#">
<img src="url-gambar-anda" />
</a>
</li>
</ul>
</div>
</div>
<!-- SLIDER JS -->
<script src="https://www.googledrive.com/host/0B8x7i5dWad7OaDRKRUtDZ3hfb0E"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
controlNav: true,
directionNav: true,
easing: "swing",
slideshowSpeed: 3000,
animationSpeed: 600,
});
});
//<![CDATA[
$(window).load(function() {
$('#preloader').delay(350).fadeOut('slow');
})
//]]>
</script>
7. SimpanMudah, bukan? :D Sebagai catatan, sebenarnya bisa saja kode CSS dipasang bersama kode HTML di dalam Gadget, namun akan terjadi error ketika kita melakukan validasi HTML di validator.w3.org. Namun itu semua terserah sobat, mau dipasang di Gadget apa tidak.
Sobat bisa menambah jumlah gambar dengan menambahkan <li> pada class="slides" dengan format
<li>
<a href="#">
<img src="url-gambar-anda" />
</a>
</li>
Ganti tanda "#" dengan alamat yang anda inginkan dan "url-gambar-anda" dengan alamat gambar yang sudah diupload dihosting (bisa juga dengan menggunakan google drive).Dalam slider ini anda tidak perlu mengatur ukuran width dan height gambar karena sudah otomatis responsive. Yang perlu anda lakukan hanya menyamakan ukuran gambar anda sebelum diupload ke hostingan. Contoh : 400px x 225px.
Anda juga bisa merubah setting seperti kecepatan slider dan sebagainya di kode berikut
animation: "slide", controlNav: true, directionNav: true, easing: "swing", slideshowSpeed: 3000, animationSpeed: 600,Demikian tutorial cara memasang slider responsive ringan di blogspot dengan menggunakan Flexslider, semoga bermanfaat bagi anda. Terima kasih telah membaca dan Wassalam.
Baca Juga :
- Cara mengupload file di google drive- Membagi postingan menjadi 2 bagian di blogspot
- Membuat Breadcrumb valid HTML5 dan SEO Friendly
