Membuat Popular Post Dengan Style Carousel | KNOWPLUS +

Kali ini saya akan membuat posting carousel blogger populer untuk template HTML5. Setelah saya Googling, ternyata ada juga banyak yang berbagi tentang pos populer carousel. Tapi sayangnya semua hanya meng-copy paste dari blog orang lain sehingga korselnya tidak berfungsi.

Untuk itu, sekarang saya membuat posting carousel blogger populer dengan slick.js. Posting populer Carousel sudah responsif, ada dua tempat untuk pemasangan header dengan model Carousel ini yaitu dipasang dibawah Header blog atau pada sidebar.

Untuk Header Blog

Pertama-tama salin kode di bawah ini dan pastekan tepat di atas kode </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.slick-list,.slick-slider,.slick-track{position:relative;display:block;height:100%}
.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}
.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:0}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{top:0;left:0}
.slick-track:after,.slick-track:before{display:table;content:''}
.slick-track:after{clear:both}
.slick-slide{display:none;float:left;height:100%;min-height:1px}
[dir=rtl] .slick-slide{float:right}
.slick-slide img{display:block;width:100%;height:100%}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}
.slick-dots,.slick-next,.slick-prev{position:absolute;display:block;padding:0}
.slick-dots li button:before,.slick-next:before,.slick-prev:before{font-family:slick;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-loading .slick-list{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2gyLjoyMz2WNGnJyMccS61ToUwjwXMzTGFtSnmcnviFXWPee8UAy3g-wd_klfLI2TtGmoD7zXBdcyxHsIdrHYktX0IpRZXS37SkazLPccttIOZ03pumeLKKOQb6qNnmcBapKVPFJann0/s1600/ajax-loader.gif) center center no-repeat #fff}
.slick-next,.slick-prev{font-size:0;line-height:0;top:50%;;height: 34px;width: 34px;border-radius: 2px;background:#000;background: rgba(0,0,0,.5);-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;}
.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;}
.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}
.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}
.slick-next:before,.slick-prev:before{font-size:20px;line-height:1;opacity:.75;color:#fff}
.slick-prev{left:15px;z-index:999}
[dir=rtl] .slick-prev{right:-25px;left:auto}
.slick-prev:before{content:'f053';font-family: FontAwesome;}
.slick-next:before,[dir=rtl] .slick-prev:before{content:'f054';font-family: FontAwesome;}
.slick-next{right:13px}
[dir=rtl] .slick-next{right:auto;left:-25px}
[dir=rtl] .slick-next:before{content:'f054';font-family: FontAwesome;}
.slick-dotted.slick-slider{margin-bottom:30px}
.slick-dots{bottom:-25px;width:100%;margin:0;list-style:none;text-align:center}
.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}
.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}
.slick-dots li button:focus,.slick-dots li button:hover{outline:0}
.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}
.slick-dots li button:before{font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000}
.slick-dots li.slick-active button:before{opacity:.75;color:#000}

.carousel{margin:0!important}
#PopularPosts2.PopularPosts{background:#fff;padding:10px;margin:0;}
#PopularPosts2.PopularPosts .widget-content{height:180px;overflow:hidden;}
#PopularPosts2.PopularPosts a,#PopularPosts1.PopularPosts .popular_content img{width:100%!important}
#PopularPosts2.PopularPosts h2{position:relative;color:#333;font-weight:700;overflow:hidden;margin:0 2px 10px 5px;text-transform:uppercase;}
#PopularPosts2.PopularPosts h2 div{padding:0 10px 0 0;display:inline;float:left;}
#PopularPosts2.PopularPosts h2:after{content:'';display:inline-block;float:left;position:absolute;top:0;height:15px;margin:2px 0 0 0;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkONci64WoVKZKKpp_ztBxzN4DNqpQ_K6qHbu9IGt0LRyfdRq4NdVbDYIaFHnXIrh5xniMgKK8pMRDCFK7KaqHlr_3sKxGU-OKanGhKsnq7UDTuq1ndUkKFJkSsITnPHC-etaTxaCAPBZ0/s1600/repeat-bg.png);opacity:.9;}
#PopularPosts2.PopularPosts a h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;background:rgba(0,0,0,.7);color:#fff;padding:8px 10px;position:absolute;bottom:0;left:0;right:0;}
.popular_content{position:relative;margin:0 5px}
@media screen and (max-width:414px){
#PopularPosts2.PopularPosts .widget-content{height:220px;}
}
@media screen and (max-width:375px){
#PopularPosts2.PopularPosts .widget-content{height:200px;}
}
@media screen and (max-width:360px){
#PopularPosts2.PopularPosts .widget-content{height:190px;}
}
@media screen and (max-width:320px){
#PopularPosts2.PopularPosts .widget-content{height:180px;}
}
/*]]>*/
</style>
</b:if>

Langkah kedua salin kode dibawah ini dan pastekan di atas kode </body>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("https://cdn.rawgit.com/KompiAjaib/font-awesome/master/font-awesome-4.7.0/css/font-awesome.min.css");

function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/js/master/popular-slick.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

Jika HTML blog kamu sudah menggunakan Font Awesome maka hapus kode script yang diberikan markah merah di atas.

Langkah ketiga kopi kode script dibawah ini dan pastekan tepat dibawah header blog pada HTML blog mu.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <b:section class='carousel' id='carousel' preferred='yes'>
          <b:widget id='PopularPosts2' locked='false' title='Hot On This Blog :' type='PopularPosts' version='1' visible='true'>
            <b:includable id='main'>
                <b:if cond='data:title != &quot;&quot;'><h2><div><data:title/></div></h2></b:if>
  <div class='widget-content popular-posts'>
<div class='slider slider-nav autoplay'>
<b:loop values='data:posts' var='post'>
        <b:if cond='!data:showThumbnails'>
          <div><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 -->
            <h3><a expr:href='data:post.href'><data:post.title/></a></h3>
            <p><data:post.snippet/></p>
            </b:if></div>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
            <div class='popular_content'><b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                <a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 280)                                  : data:post.thumbnail' var='image'>
                    <img expr:alt='data:post.title' expr:data-lazy='data:image' height='180' width='280'/>
                  </b:with><h3><data:post.title/></h3>
                  </a>
              </b:if></div>
        </b:if>
      </b:loop>
    </div>
  </div>
</b:includable>
          </b:widget>
        </b:section>
</b:if>

Cari kode id navigator header blogmu, beberapa template memiliki id header yang berbeda-beda.
Contoh dibawah ini id header blog saya adalah nav.


Pastekan kodenya di akhir kode script untuk kategory header, contoh seperti gambar dibawah ini.


Dan pastikan blog Anda sudah menggunakan jquery versi apapun agar widget ini dapat berfungsi.

Untuk yang kedua untuk Sidebar kunjungi laman ini ==> Membuat Popular Post di Sidebar Dengan Style Carousel  | KNOWPLUS +

Share It