Cara Membuat Carousel Blogger Popular Posts With Slick.js




Cara Membuat Carousel Blogger Popular Posts With Slick.js

Cara Membuat Carousel Blogger Popular Posts With Slick.js: Bagi anda yang ingin membuat Carousel Blogger Popular Posts pada blog anda, mungkin anda bisa melanjutkan untuk membaca artikel ini. untuk anda yang masih pemula atau masih newbie simak saja dulu penjelasanya, karena pasti anda akan pusing nanti melihat banyak kode yang terberan di bawah ini. hehe
Mungkin banyak juga rekan-rekan blogger yang lain sudah banyak juga yang sudah share tentang carousel popular posts. Namun saya rasa tidak ada salahnya juga saya untuk share kembali tentang Cara Membuat Carousel Blogger Popular Posts With Slick.js

Carousel popular post ini 
sudah responsive, dan saya menyediakan 2 jenis Carousel popular post yaitu untuk dipasang di atas footer dan untuk di pasang di sidebar.

Nah mungkin saya tidak panjang lebar lagi untuk menjelasakan, jika anda tertarik untuk mencoba nya di blog milik anda, maka ikuti langkah-langkah penjelasan di bawah ini. Dan tolong pahami baik- baik ya  cara penerapannya jangan sampai salah memasukan kodenya nanti.

Bagi anda yang ingin melihat Domo dari Carousel popular post, saya telah menyediakan video gambar gif nya di bawah ini.
DEMO

Kode di bawah ini Untuk di atas footer blog. 

Membuat Carousel Blogger Popular Posts

1.Pertama , pastikan sobat udah masuk di dasbhor sobat sendiri
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Silahkan copy kode di bawah ini dan paste di atas </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://3.bp.blogspot.com/-rAgfLpcfLyY/WLJuGECMkdI/AAAAAAAApmo/Uxbc67IZMEs034Wrrkz_1GYuvaa_T3W1wCLcB/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(http://4.bp.blogspot.com/-R2WTW6O9E1o/VX7dqIGT1eI/AAAAAAAACc4/pyvQDMMLX3E/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>
4. Silahkan anda copy kode di bawah ini dan letakan di atas </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 blog Anda sudah menggunakan font awesomesilahkan hapus kode yang ditandai warna orange.
5. Selanjutnya silahkan anda copy kode di bawah ini dan simpan di atas footer blog.
<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 Wallpaper' 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> 

Dan pastikan juga blog anda sudah menggunkan jquery libry berapa pun versinya agar widget ini bisa bekerja

Kode di bawah ini Untuk di atas footer blog. 

6. Nah jika ingin menampilkan carousel popular post dengan slick.js di sidebar, maka untuk langkah pertamanya sama dengan di atas. Silahkan gunakan kode CSS yang sama di atas tadiseperti langkah pertama.
7. Kemudian silahkan anda gunakan kode javascript di bawah ini dan simpan 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/sidebarpopular-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 blog Anda sudah menggunakan font awesomesilahkan hapus kode yang ditandai warna orange.
8. Dan anda gunakan kode di bawah ini kemudian silahkan simpan di bagian sidebar di edit HTML.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <b:widget id='PopularPosts2' locked='false' title='Hot Wallpaper' 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:if>

Dan pastikan juga blog anda sudah menggunkan jquery libry berapa pun versinya agar widget ini bisa bekerja
Demikian penjelasan pada malam ini, selamat mencoba dan semoga berhasil ya. jika ada yanag ingin bertanya silahkan klik saja tombol komentar di bawah ini.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect