Skip to main content

Recent Disqus

Click Here On Load Disqus

Cara Membuat Slider Popular Post Seperti Igniplex

Cara Membuat Slider Popular Post Seperti Igniplex
Cara Membuat Slider Popular Post Seperti Igniplex
www.azid45.web.id - Cara Membuat Slider Popular Post Seperti Igniplex. Pada kesempatan kali ini kita akan bahas tutorial slider popular post yang digunkan di template Igniplex. Setelah saya bereksperiment kak igniel membuat slider popular post dengan owl carousel.

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 != &quot;&quot;'><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 ? &quot;item-content&quot; : &quot;post&quot;'>
<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, &quot;1:1&quot;)                                  : 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.
Reactions
PERHATIAN:Jika anda mendownload di blog ini, maka anda akan di redirect terlebih dahulu ke laman Short Safelink untuk keamanan blog. Oleh karena itu jika terjadi error 404 maka terjadi kesalahan dalam klik di laman redirect atau terjadi refresh laman redirect. Untuk mengatasinya anda bisa mengulang kembali klik file yang akan anda download di blog ini. Dan Jika anda ingin bertanya atau bantuan bisa kontak kami dengan Klik Disini atau nomor berikut 089677337414 - Terima kasih.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui
Buka Komentar
Tutup Komentar