Cara Membuat Slide Image di Blog

Halo sobat semua pada kesempatan kali ini saya akan share tutorial membuat image slider di blog dengan menggunakan ini pasti dapat mempermudah buat sobat jika ingin memperlihatkan gambar menjadi slide tidak list lagi.

Slide image ini tidak akan membuat blog sobat menjadi lambat karena hanya menggunakan tambahan jQuery agar dapat menambahkan beberapa manipulasi item saja.

Cara Membuat Slide Image di Blog

Pertama buka Blog > klik Tema > klik Edit HTML

Kedua tambahkan kode berikut tepat diatas </head>

<style>
/* CSS Pintarsaurus Slider */
.slide-wrap{margin:30px 0;overflow:hidden;position:relative}
.slide-wrap ul li a img{height:309px;width:100%}
.pintarsaurus-wrap{overflow:hidden;overflow-x:scroll;position:relative;width:100%;height:330px}
.slide-wrap ul{position:absolute;list-style:none;padding:0;margin:0}
.slide-wrap li{white-space:nowrap;list-style:none;padding:0;margin:0}
.slide-wrap iframe{width:100%;height:87%;background:#000}
.slide-wrap ul li a{cursor:auto;padding-right:0!important;margin-right:5px;display:inline-block;vertical-align:middle;position:relative;max-width:550px;height:355px;background-position:center;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover}
.slide-wrap ul li a.youtube-iframe{width:550px}
.slide-wrap ul li a:last-child{margin-right:0}
a.right-b{right:0}
a.left-b svg,a.right-b svg{width:15px;margin:10px 0 0}
a.left-b,a.right-b{position:absolute;top:35%;width:40px;line-height:50px;height:50px;text-align:center;color:#fff;background:#000;opacity:.7;transition:all 0 ease-in-out}
a.left-b:hover,a.right-b:hover{opacity:1}
.pintarsaurus-wrap::-webkit-scrollbar{width:8px;height:8px;border-radius:10px}
.pintarsaurus-wrap::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:10px}
.pintarsaurus-wrap::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
.pintarsaurus-wrap::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out;border-radius:10px}
</style>

Ketiga tambahkan kode javascript berikut tepat diatas </body>

<script>//<![CDATA[
$('a.right-b').click(function() {
  $('.pintarsaurus-wrap').animate({
    scrollLeft: "+=500px"
  }, "normal");
});
 $('a.left-b').click(function() {
  $('.pintarsaurus-wrap').animate({
    scrollLeft: "-=500px"
  }, "normal");
});
//]]></script>

Terakhir Simpan tema

Setelah berhasil menambahkan kode CSS dan Javascript. Sobat hanya perlu memanggil kode diatas untuk membuat slide image tersebuat.

Selanjutnya silahkan masuk ke Edit Postingan > klik Mode HTML > tambahkan kode berikut seterah mau dimana sesuai keinginan sobat.

<div class='container'>
  <h1>Slider Image Pintarsaurus</h1>
<div class="slide-wrap">
<div class="pintarsaurus-wrap">
<ul>
<li>
<a class="youtube-iframe" href="javascript:void(0)">
<iframe allow="autoplay; encrypted-media" allowfullscreen="false" frameborder="0" src="https://www.youtube.com/embed/03qDL0Xp2Lw?rel=0&amp;showinfo=1"></iframe>
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn2aEhgeCY7CJ7YriWO_V-8jF-DHVEFj9VQ-zV69Kni3nE3Orv-21sW7AOjo93mWturssxDRrls3VFnitWCig9t0-TfMt9odsr5XqYA16oe9-oLYcH5D6Jdh_iJh9vzgwa7V7mR0wfKWQ/s1600/RoC.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgARMtEhEBmf6YlFtq6X3qbyPepMV0wF2Pzf3Bb43JAlyeAch6jkVk6I5TzTMB6FGnYOfA17sfMZxe2V-fQKcnVjMdznc8OK4H2iiHd1la2iTaKIf-wUMPBwnu-wm-yopLBUII3iKs06zs/s1600/RoC2.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNvyCmA0xjYs17vh6TVMdidjpiyLeQpNPgjxkrhvT03rZ2lpPazPSZbctwipMDYwvi4l10B0xbWvTrob1yO9Hxp8mY-QPpU2Xp5xNwHdpMKW4ZuKHQnEtpYj7FdgKhHuUtXzYr2Hsa8tY/s1600/RoC3.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHZXVFLB0COg3xdmWufczabJEdhKtcZqrxd_3AgUVJF79H5xpiMESBCNEnDoRNfyVpdw9PAa9bXQ3FrisLw8Txou5m05GNOhvKuZJ7GlOSnFjnsYdIXIewZQUtb4bILc5z34nI1tu20BA/s1600/RoC4.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiY-SEumPAiBDdX6ZivFcKgOQKhc90849eN0ip3MatSMuY8xfEK6Cj_dA2jWWQNBb3hfXHyfENsiugIkPqX_CU5YJpcAqpCluJMzg1RoxsnzAmhYWs9zqo4sLjOJQovc5apABfZxdloEc/s1600/RoC5.jpg" title="Judul Gambar" />
</a>
</li>
</ul>
</div>
<a class="left-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-left" class="svg-inline--fa fa-angle-left fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg></a>
<a class="right-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></a>
</div>
</div>

Terakhir Simpan or Publish

Bagi sobat yang ingin melihat tampilannya seperti apa ? klik saja tombol berikut

Demo

Untuk menambahkan image slide lain, sobat tambahkan kode <li> dan </li> setelah </li> penutup