×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

Cara Membuat Slider Popular Post Seperti Template Igniplex

Faronesia.com - Halo sobat Faronesia, apa kabar kalian semua? bagaimana keadaan tabungan adsense anda? semoga sehat selalu dan bertambah penghasilan anda. Pada kesempatan kali ini saya akan memberikan tutorial membuat slider popular post yang digunakan pada Template Igniplex.

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>
Kode CSS Caraousel
<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 != &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>
  • 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.
Buka komentar
Tutup komentar
  1. Thank for sharing, keep up work
    Visit my site for get a free theme
    Themerum.com is free download shopping blogger template website.

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup