Sebagai informasi tambahan untuk anda bahwa, slider popular post Template Igniplex menggunakan plugin owl carousel. Owl carousel merupakan sebuah plugin jQuery berupa animasi slider berupa gambar-gambar, didalam plugin ini terdapat beberapa efek yang bisa kita gunakan, mulai dari animasi basic, auotplay, auto width dan lain sebagainya.
Dengan menggunakan plugin slider owl carousel tentunya memberikan kemudahan untuk anda tanpa perlu membuat kode dari nol yang pastinya membutuhkan waktu yang sangat panjang. Namun, plugin owl carousel juga mempunyai sisi kekurangan yang cukup berdampak pada blog yaitu memperlambat loading, pasalnya plugin owl carousel salah satu bentuk script eksternal. Untuk mengatasi masalah tersebut, anda bisa mengekstrak plugin owl carousel menjadi script internal.
Baiklah tadi kita sudah mempelajari dan memahami sedikit plugin owl carousel dan sekarang mari kita praktikkan tutorial yang telah saya siapkan.
Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.
Cara Membuat Slider Popular Post Seperti Template Igniplex
- Masuk ke dashboard blogspot.
- Lalu masuk ke menu tema blog.
- Kemudian klik edit HTML.
- Cari kode </head>
- Selanjutnya tempelkan 2 script dibawah ini tepat diatas kode </head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css'/>Kode jQuery
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
- Cari kode seperti ]]></b:skin> atau </style>.
- Tempelkan kode CSS berikut dibawah ini tepat diatas kode ]]></b:skin> atau </style>.
/* Owl Carousel v2.3.4 */
.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;
}
}
- Selanjutnya cari kode <div id='wrapper'> (pengguna viomagz) lalu 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>
- Lalu cari kode </body> 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, simpan template.
Demikianlah mengenai Cara Membuat Slider Popular Post Seperti Template Igniplex semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.