Cara membuat simple slide image dipostingan blog | satya22.com

Hallo sobat blogger, dikarenakan kesibukan kerja dan lain-lain, saya baru sempet nulis artikel lagi saat ini, langsung aja ya, pada kesempatan kali ini saya akan membagikan tentang bagaimana :

Cara Membuat Simple Slide Image Dipostingan Blog

Slide ini sangat ringan dan responsive sehingga cocok digunakan untuk blog download, toko online ataupun foto gallery.

Demo

Langsung ketutorialnya pertama:

Login ke blog kalian > Tema > Edit HTML, Kemudian letakan CSS yang ada dibawah ini tepat diatas kode ]]</b:skin> atau </style>

/* CSS Anya Mini Slider */
.slide-wrap{margin:30px 0;overflow:hidden;position:relative}
.slide-wrap ul li a img{height:309px;width:100%}
.anya-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}
.anya-wrap::-webkit-scrollbar{width:8px;height:8px;border-radius:10px}
.anya-wrap::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:10px}
.anya-wrap::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
.anya-wrap::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out;border-radius:10px}

Kedua :

Copy script yang ada dibawah ini dan letakan diatas kode </body>

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

Setelah itu save/simpan template.

Yang terakhir, copy script dibawah ini dan letakan didalam postingan, Postingan > Edit Postingan > Klik Mode HTML

<div class="slide-wrap">
<div class="anya-wrap">
<ul>
<li>
<a class="youtube-iframe" href="javascript:void(0)">
<iframe allow="autoplay; encrypted-media" allowfullscreen="false" frameborder="0" src="https://youtu.be/2rlzE7hrgx8"></iframe>
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://image.winudf.com/v2/image/Y29tLmVhLmdhbWVzLnIzX3Jvd19zY3JlZW5fMF8xNTM5OTAzNjYzXzAwOQ/screen-0.jpg?h=800&fakeurl=1&type=.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://image.winudf.com/v2/image/Y29tLmVhLmdhbWVzLnIzX3Jvd19zY3JlZW5fMV8xNTM5OTAzNjY0XzAyMw/screen-1.jpg?h=800&fakeurl=1&type=.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://image.winudf.com/v2/image/Y29tLmVhLmdhbWVzLnIzX3Jvd19zY3JlZW5fMl8xNTM5OTAzNjY1XzAyOA/screen-2.jpg?h=800&fakeurl=1&type=.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://image.winudf.com/v2/image/Y29tLmVhLmdhbWVzLnIzX3Jvd19zY3JlZW5fM18xNTM5OTAzNjY2XzA3NQ/screen-3.jpg?h=800&fakeurl=1&type=.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://image.winudf.com/v2/image/Y29tLmVhLmdhbWVzLnIzX3Jvd19zY3JlZW5fNF8xNTM5OTAzNjY3XzA1NA/screen-4.jpg?h=800&fakeurl=1&type=.jpg" title="Judul Gambar" />
</a>
</li>
</ul>
</div>

Klik save / simpan dan lihat hasilnya.

KETERANGAN :
"Judul gambar pertama isi dengan judul gambar kalian, Ganti URL gambar dengan URL gambar kalian, Judul gambar yang terakhir isi dengan keterangan gambar kalian, Atau Judul gambar tidak usah diganti agar slider terlihat simple dan lebih ringan."

Thanks To idblanter.com

Share This Article :