Cara Membuat Slider Popular Post Seperti Igniplex
Dengan slider owl-carausel tentunya akan lebih mudah tanpa editing sana-sini dan script yang panjang karena script sudah tertanam khusus untuk Js owl-carausel. Minusnya adalah karena menggunakan script eksternal bisa jadi dapat memperlambat blog Anda.
Untuk mengatasinya Anda bisa mengekstrak script tersebut agar menjadi internal, namun scriptnya terlalu banyak akan tetapi tak sebanyak script jQuery. :D
Secara umum slider owl-carouse menggunakan tatanan kode HTML berikut ini
<div class='owl-carousel'> <div>Konten1</div> <div>Konten2</div> <div>Konten3</div> <div>Konten4</div> </div>
dan pemanggil java script dibawah ini
<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>
KETERANGAN
kode .owl-carouse bisa Anda ganti sesuai kode HTML pada contoh diatas.
Pertahtikan dalam javascript terdapat kode responsive:{0:{items:1},640:{items:2},800:{items:3} artinya adalah agar tampilan menjadi responsive dimana pada ukuran layar 0-639 menampilkan hanya satu banner slide, 640-799 menampilkan dua banner slide, dan 800 keatas menampilkan 3 slide banner.
Agar Slider Carausel berjalan dengan sempurna Anda harus pasang jQuery, CSS owl-carouse, dan Javascript owl-carousel.
Kode CSS Caraousel (letakkan diatas </head>)
<link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css'/>
Kode jQuery (letakkan diatas kode </head>)
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
Kode JS Carousel (letakkan diatas kode </body>)
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'/>
Membuat Slider Popular Post Seperti Igniplex di Template Viomagz
Bagi Anda yang memiliki template Viomagz dan ingin menggunakan slider popular post bisa simak tutorialnya berikut ini:
Pertama, login Blogger
Kedua, menuju menu Tema - edit HTML
Ketiga, Letakkan kode CSS dibawah ini didalam kode <b:skin> .. </b:skin> atau <style> ... </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;
}
}
Keempat, cari kode <div id='wrapper'> jika sudah ketemu letakkan kode berikut tepat dibawah kode <div id='wrapper'>
<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>
NB: lihat kode PopularPosts1, jika Anda sudah menggunakan popular post dengan kode tersebut ketika di simpan akan ada error untuk itu Anda bisa mengubahnya menjadi PopularPosts2, atau PopularPosts3, dan seterusnya.
Kelima, letakkan kode berikut ini tepat 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, Save Template
NB.
Karena kode CSS udah saya urai jadi tidak perlu lagi menambahkan kode CSS carousel eksternal, dan karena template viomagz sudah terdapat jQuery maka tidak perlu dipasang lagi.
Bagaimana mudah bukan?. Demikianlah tutorial terkait Cara Membuat Slider Popular Post Seperti Igniplex. Semoga bermanfaat.
PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
contact atau 089677337414 - Terima kasih.