Bagi kalian yang sudah pernah menggunakan widget owl carousel tentu tidak asing dengan fitur yang ditampilkan widget slider ini, dengan fitur yang dapat digeser dengan mouse, tombol next prevous dan juga tombol dots kecil yang juga dapat berpindah slide ke slide dengan menampilkan slide lainya..
Bagi website atau blog yang memiliki susunan yang lumayan panjang, tapi menginginkan gambar slider yang kecil, widget owl carousel ini bisa jadi solusinya, karena hanya menampilkan gambar kecil di tengah dan kiri kanannya memperlihatkan gambar selanjutnya dengan samar-samar.
Widget ini berguna untuk blog sobat yang menjadikan gambar media jasa promosi, seperti jualan, mempromosikan jasa pribadinya, mempromosikan bidangnya, atau bahkan menampilkan gambar karya pribadi untuk blog galeri.
Tutorial Memasang Widget Owl Carousel Slide
Tutorial ini dapat berguna untuk seluruh platform, mulai blogspot maupun wordpress.
Tapi sebelumnya Pastikan blog kalian sudah memiliki JQuery.
Langkah Awal untuk pemasangan Kalian Masuk ke blog > Tema > Edit HTML.
Tambahkan CSS Berikut Diatas Kode ]]></b:skin>
/* Owl Carousel Slide Design by anonymus */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{background:#fff;display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;width:100%;transform:scale(1.7);padding:80px 0}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none;transition:all .4s ease-in-out}.owl-carousel .owl-item img{background:#eee;display:block;width:100%;border-radius:5px;height:240px;object-fit:cover}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^='']{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}.owl-item .blanter-owl-image{opacity:0;transition:all .3s ease-in-out}.owl-item.active .blanter-owl-image{transform:scale(1);opacity:1}.owl-item .blanter-desc{transform:translate(0,40px);opacity:0}.owl-item.active .blanter-desc{transform:translate(0,0);opacity:1}.owl-dots{text-align:center;position:relative;bottom:0;left:0;right:0}.blanter-owl-image{z-index:1}.owl-carousel .owl-dots button{background:#ddd;width:11px;height:11px;border-radius:10px;margin:0 5px}.owl-carousel .owl-dots button.active{background:#2b69e2;width:20px}
.sliderbanner.container{position:relative;max-width:1200px;margin:0 auto;padding:20px 0;overflow:hidden}.owl-item.active{opacity:.5}.owl-item.active.center{opacity:1}
.owl-nav{position:absolute;z-index:1;width:100%;font-size:40px;top:40%}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev{box-shadow:0 5px 8px rgb(0 0 0 / 15%);background:#fff;height:50px;line-height:0;width:50px;border-radius:100%;position:absolute}
.owl-carousel .owl-nav button.owl-next{right:18%}.owl-carousel .owl-nav button.owl-prev{left:18%}
@media screen and (max-width:980px){.owl-carousel .owl-stage-outer{transform:scale(1.5)}}
@media screen and (max-width:768px){.owl-carousel .owl-stage-outer{transform:scale(1);padding:10px 0}.owl-nav{display:none}}langkah kedua
Letakan kode berikut diatas kode </body>
<script src="https://cdn.jsdelivr.net/gh/blanter/design@master/blanter-owlcarousel.js"></script>
<script>
//<![CDATA[
// Enable Owl Carousel
$('.owl-carousel').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 15,
autoplay: true,
dots:true,
nav:true,
autoplayTimeout: 8500,
smartSpeed: 450,
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3
}
}
});
//]]>
</script>Langkah Terakhir
Kalian hanya perlu memasukan kode dibawah ini ke tempat yang kalian inginkan untuk menampilkan widget ini , widget ini dapat dipasang di postingan,halaman,html dan tata letak blog.
<!-- SLIDER BLANTER -->
<div class='sliderbanner container'>
<div class='owl-carousel owl-theme' id='blanter-carousel'>
<!-- START -->
<div class='blanter-owl-image'>
<a href='#link' title='Slider'>
<img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmwuHI6_fSqfgi9D4rAhJBKaXEQy7E8byZQIRTWTTfMvpMiCNncxsHfbfJyw2jlfz8hMRGz6_UPhsn4yGt2KViPphSEICMhqRR_a9crsMac7_Y46M5oFW14NoDjbbErPvd9WWr6rPH0Mc/s1000/Orbit+Working+%25284%2529-min.jpg'/>
</a>
</div>
<div class='blanter-owl-image'>
<a href='#link' title='Slider'>
<img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyUuMdQnZm668lCCY_JmEGxXMKVgEporDNBliYP37wMnuxzPr4XXbC8_Wo_ZBnK4RtZE717qYC3fQ4GPts__pTtcT9Q-MKQUaK3Pszz9b6bfiactTursO3lVtbehXNKI9_D5weY5nWGjY/s1000/Orbit+Working+%25282%2529-min.jpg'/>
</a>
</div>
<div class='blanter-owl-image'>
<a href='#link' title='Slider'>
<img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflXmT8OvA5VNc_bJyitT3OBnr9T2c1NUFKhRyqrV0t-fa66rj8SXrHGyEJ3RAyLZkoSiwhhAibwirDDf1zhhdwWSu80doGsLnocir6KpyWquRWeUzeEoLkKsEAl1xHybzQOfHLQCbfWE/s1000/Orbit+Working+%25283%2529-min.jpg'/>
</a>
</div>
<div class='blanter-owl-image'>
<a href='#link' title='Slider'>
<img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzI9XK5Zc5U3Is1OJwj_6RNN_2vRg4p5SzfRkd0RasO-MUGLjs1fhdmmXobK3pv4AkWNvXKzLJs5sKMkLC2M37EEpSKFAUUtxEgxglI5rm37OdwR7UrO-c8VOaZNGQWuSOUdEUcd19x_Q/s1000/Orbit+Working+%25285%2529-min.jpg'/>
</a>
</div>
<!-- END -->
</div>
</div>
<!-- END SLIDER BLANTER -->Simpan Tema .
Untuk menambahkan gambar pada slide kalian hanya perlu mengubah link yang berwarna merah dibawah ini dengan gambar yang ini kalian pakai.
<img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzI9XK5Zc5U3Is1OJwj_6RNN_2vRg4p5SzfRkd0RasO-MUGLjs1fhdmmXobK3pv4AkWNvXKzLJs5sKMkLC2M37EEpSKFAUUtxEgxglI5rm37OdwR7UrO-c8VOaZNGQWuSOUdEUcd19x_Q/s1000/Orbit+Working+%25285%2529-min.jpg'/>
</a>
*****TERIMA KASIH*****