Serieswans.com - Halo sobat blogger, pada kesempatan kali ini kita akan membahas mengenai tutorial cara membuat membuat slider owl caraousel popular post seperti yang digunakan di template igniplex.
membuat Slider Owl Caraousel ini akan lebih mudah dan scriptnya ini cukup panjang karena script tersebut sudah tertanam dan di khususkan untuk javascript owl caraousel. akan tetapi kekurangannya ini dikarenakan menggunakan script eksternal yang bisa memperlamabat loading blog anda.
 |
| Slider Owl Caraousel Popular Post Mirip Igniplex |
nah untuk mengatasinya anda bisa mengeluarkan atau mengekstrak script tersebut agar menjadi internal, meskipun scriptnya terlalu banyak akan tetapi tidak sebanyak script Jquery
Untuk penggunaan owl carousel secara umum seperti kode HTML di bawah ini :
div class="owl-carousel owl-theme">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>Dengan pemanggil kode javascript di bawah ini
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
});Atau anda juga bisa menggunakan kode Javascript di bawah ini yang sudah di modifikasi
<script>
//<![CDATA[
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
responsive:{
0:{items:1},
640:{items:2},
800:{items:2}
},
pagination:false,
navigation:false,
margin:20,
loop:true,
autoplay:true,
autoplayTimeout:5000,
});
});
//]]>
</script>
tips —
Silahkan anda sesuaikan dan implementasikan kode HTML owl-caraousel di atas. dan perthatikan juga beberapa kode berikut :
responsive:{0:{items:1},640:{items:2},800:{items:3} maksud dari kode tersebut adalah agar tampilan menjadi responsive dimana pada ukkuran layar dari 0 sampai 639 menampilkan hanya 1 baner slide, ukuran 640 sampai 799 menampilkan 2 banner slide dan 800 ke atas menampilkan 3 banner slide.
kode margin:20 itu berarti kita mengatur jarak antar slidenya 20, silahkan anda atur sesuai keinginan anda.
kode loop:true yang berarti perulangan atau pengulangan, maksudnya jika slide tersebut telah sampai 3 maka akan mengulang kembali ke 1 begitupun seterusnya.
kode autoplay:true yang berarti otomatis berjalan. maksudnya slide tersebut akan berjalan tanpa kita klik navigasi bulet di bawah slide tersebut.mengapa bisa begitu karena nilainya true, jika false maka anda harus memindahkan slidenya secara manual
kode autoplayTimeout:5000 yang berarti autoplay tersebut memiliki waktu yang telah ditentukan yaitu 5000 ms.
Silahkan tambahkan kode JS Caraousel, Jquery dan CSS Caraousel di bawah ini
Kode Javascript Caraousel (Silahkan letakan di atas kode </body>)
https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.jsKode Jquery (Silahkan letakan di atas kode </head>)
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">Kode CSS Caraousel (Silahkan letakan di atas kode </head>)
https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.cssCara Membuat Slide Owl Caraousel Popular Post Seperti Igniplex di Viomagz
Nah untuk anda pengguna template viomagz yang ingin memasang slider Owl Caraousel Popular Post ini silahkan ikuti tutorial di bawah ini ya sob:
- Login terlebih dahulu ke blogger
- Masuk ke menu Tema => Edit HTML
- Selanjutnya copy kode CSS Caraousel di bawah ini dan letakan diatas kode </b:skin> atau </style> jika tidak ada silahkan anda buat kode <style> taruh kode disini </style>
/*
* Owl Carousel v2.3.4
* Copyright 2013-2018 David Deutsch
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{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;-webkit-transform:translate3d(0,0,0);/*border-radius:8px*/}.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}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled{display:none}.owl-carousel .owl-nav.disabled{display:block;position:absolute;bottom:0;right:0;left:0;z-index:5}.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;margin:0px;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-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.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;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-dots,.owl-nav{text-align:center;-webkit-tap-highlight-color:transparent} .owl-nav{margin-top:10px}.owl-nav [class*=owl-]{color:#FFF;font-size:12px;margin:5px;padding:4px 7px;background-color:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px} .owl-nav [class*=owl-]:hover{background-color:#fff;color:#FFF;text-decoration:none} .owl-nav .disabled{opacity:.5;cursor:default} .owl-nav.disabled+.owl-dots{display:none} .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-dots .owl-dot span{width:8px;height:8px;margin:3px; background-color:#fff;display:block;-webkit-backface-visibility:visible;transition:all.2s ease;border-radius:30px} .owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span{background-color:#ef5350;}
.owl-dots button:hover{background:none !important;}
.owl-dots .owl-dot.active span{background-color:#009688;width:20px;height:10px;}
.owl-prev span,.owl-next span{display:block;color:transparent;width:8px;height:8px;margin:3px;background-color:#fff;border-radius:30px;}
.owl-prev span:active,.owl-prev span:hover,.owl-next span:active,.owl-next span:hover{background-color:#5b86e5;width:20px;height:10px}
.owl-prev span{float:left}
.owl-next span{float:right}
/*Slider*/
#Slider{
color:#fff;
position:relative;
padding:10px 10px 0px;
}
#Slider .PopularPosts{
width:100%;
overflow:auto;
}
#Slider .PopularPosts h2{
display:none;
}
#Slider .PopularPosts .widget-content{
opacity:1;
transition:all .3s ease;
}
#Slider .PopularPosts .inner{
display:grid;
grid-template-columns:2fr 1fr 1fr;
grid-gap:10px;
margin:0px;
padding:0px;
position:relative;
overflow:hidden;
}
#Slider .PopularPosts .post:hover{
animation-play-state:paused;
}
#Slider .PopularPosts .post:first-child{
grid-area:1 / 1 / 3 / 1;
}
#Slider .PopularPosts .post{
display:block;
border:0px;
margin:0px;
padding:0px;
}
#Slider .PopularPosts .post:before{
display:none;
}
#Slider .PopularPosts .post:hover .item-thumbnail:after{
opacity:0;
}
#Slider .PopularPosts .post:hover .item-thumbnail img{
transform:scale(1.1);
}
#Slider .PopularPosts .item-content{
position:relative;
margin-top:0px;
margin-left:0px;
height:100%;
}
#Slider .PopularPosts .item-thumbnail{
margin:0px;
max-width:100%;
height:100%;
float:none;
overflow:hidden;
border-radius:0;
}
#Slider .PopularPosts .item-thumbnail:after{
content:'';
background:linear-gradient(transparent,rgba(0,0,0,1));
position:absolute;
bottom:0px;
width:100%;
height:50%;
transition:all .3s ease;
}
#Slider .PopularPosts .item-thumbnail img{
width:100vw;
max-width:100%;
border-radius:0px;
transition:all .3s ease;
}
#Slider .PopularPosts .container{
position:absolute;
bottom:0px;
left:0px;
display:block;
padding:15px 20px;
}
#Slider .PopularPosts .post:first-child .container{
padding:30px;
}
#Slider .PopularPosts .post-labels{
background-color:#009688;
font-size:.75rem;
color:#fff;
line-height:normal;
display:inline-block;
margin-bottom:7px;
padding:2px 6px;
border-radius:25px;
transition:all .3s ease;
}
#Slider .PopularPosts .post-labels:hover{
background-color:#ef5350;
}
#Slider .PopularPosts .post:first-child .post-labels{
margin-bottom:15px;
}
#Slider .PopularPosts .post-labels a{
color:#fff;
}
#Slider .PopularPosts .post-title{
margin:5px 0px 0px;
}
#Slider .PopularPosts .post:first-child .post-title{
font-size:1.5rem;
line-height:2.25rem;
}
#Slider .PopularPosts .post:not(:first-child) .post-title{
font-size:1.15rem;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
line-height:1.5rem;
}
#Slider .PopularPosts .post-title a, #Slider .PopularPosts .item-snippet{
color:#fff;
text-shadow:0 2px 10px #000, 0 1px 1px rgba(0,0,0,.5);
}
#Slider.owl{
padding:0px;
margin-bottom:10px;
}
#Slider.owl .PopularPosts .inner{
display:block;
}
#Slider.owl .PopularPosts .post{
width:100%;
}
#Slider.owl .PopularPosts .container{
padding:40px 30px !important;
right:0px;
text-align:center;
}
#Slider.owl .PopularPosts .post-labels{
margin-bottom:10px !important;
}
#Slider.owl .PopularPosts .post:first-child .post-title{
font-size:1.5rem;
line-height:2rem;
}
@media screen and (max-width:830px){
#Slider .PopularPosts .inner{
grid-template-columns:1fr 1fr;
grid-template-rows:auto auto auto;
}
#Slider .PopularPosts .post:nth-child(2), #Slider .PopularPosts .post:nth-child(3){
margin:0px;
}
#Slider .PopularPosts .post:first-child{
grid-area:1 / 1 / 2 / 3;
}
.FeaturedPost .widget-content .post .post-titles{
font-size:1.5rem;
}
#Slider .PopularPosts .post:not(:first-child) .post-title{
-webkit-line-clamp:3;
}
}
@media screen and (max-width:640px){
#Slider .PopularPosts .container{
padding:15px;
}
#Slider .PopularPosts .post:first-child .post-title{
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;
overflow:hidden;
}
#Slider .PopularPosts .post-title{
font-size:15px;
}
}
@media screen and (max-width:480px){
#Slider{
padding:0px;
}
#Slider .PopularPosts .inner{
grid-gap:5px;
}
#Slider .PopularPosts .container{
padding:10px;
}
#Slider .PopularPosts .post:first-child .container{
padding:20px;
}
#Slider .PopularPosts .post:first-child .post-title{
font-size:1.35rem;
line-height:2rem;
}
#Slider .PopularPosts .post:not(:first-child) .post-title{
font-size:1.15rem;
}
#Slider .PopularPosts .post:first-child .post-labels{
margin-bottom:7px;
}
#Slider.owl .PopularPosts .post-labels{
display:inline-block !important;
}
}
@media screen and (max-width:360px){
#Slider .PopularPosts .post:first-child .post-title{
font-size:1.25rem;
line-height:1.75rem;
}
#Slider .PopularPosts .post:not(:first-child) .post-title{
font-size:1.1rem;
}
}
- Kemudian cari kode <div id='wrapper'> dan jika sudah ketemu, letekan kode di bawah ini tepat dibawah kode tersebut.
<b:section class='owl' id='Slider' maxwidgets='1' showaddelement='yes'>
<b:widget cond='data:view.isMultipleItems' id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>3</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>false</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_MONTH</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div class='inner'>
<div class='owl-carousel'>
<b:loop values='data:posts' var='post'>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "post"'>
<div class='item-content'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 480, "1:1") : data:post.thumbnail' var='image'>
<img alt='' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='container'>
<div class='post-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
Warning — Perlu di perhatikanuntuk kode PopularPost1, jika anda sudah menggunakan widget tersebut dan jika simpan pasti akan eror karena terkena duplicate ID, solusinya silahkan ubah menjadi PopularPost2 atau PopularPost3, silahkan anda ubah saja angka diujungnya.
- Setelah itu copy kode Javascript Caraousel di bawah ini dan letakan diatas kode </body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'/>
<script>//<![CDATA[
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
responsive:{
0:{items:1},
640:{items:2},
800:{items:3}
},
pagination:true,
navigation:true,
margin:0,
loop:true,
autoplay:true,
autoplayTimeout:5000,
});
});
//]]></script>
- Terakhir simpan tema atau template
tips — Pada template viomagz ini sudah terpasang Jquery, jadi anda tidak perlu menambahkannya lagi.
Akhir Kata
Nah itulah pembahasan kali ini mengenai Slider Owl Caraousel dan Cara Membuat Slider Owl Carausel Popular Post Seperti Igniplex. jika ada pertanyaan silahkan tanyakan di kolom komentar ya sob. semoga bermanfaat.
Posting Komentar