Cara Membuat Mini Slider Ringan di Postingan Blog
21 October 2018
Halo Sobat Blanter, kembali lagi saya akan membagikan sebuah tutorial mini slider yang dapat digunakan untuk video maupun gambar. Slider ini mempunyai fitur seperti slider pada umumnya, hanya saja slider ini sangat ringan dan hanya menggunakan sedikit bumbu jquery.
Slider ini bisa ringan karena hanya mengandalkan efek klik pada tombol kiri dan kanan dan juga bergerak dengan metode scroll, itulah mengapa slider ini juga memiliki scroll pada bagian bawahnya agar memudahkan pengunjung untuk memilih ingin menggunakan tombol atau scroll.
Ringan, namun tetap nyaman pada mode responsive, karena dapat di slide kiri dan kanan tanpa wajib menekan tombol panah. Ukuran gambar yang dapat di pasang juga beragam, horizontal ataupun vertikal tidak masalah.
 |
| Memutar Video pada Mini Slider |
Meletakan Video dan Gambar dalam 1 slider? tidak masalah, semua berjalan lancar pada mini slider ini. (btw Video maupun gambar pada post ini bukan iklan, cuma contoh saja 😁).
Info : Tutorial ini dilengkapi dengan video singkat di akhir post.
Perlu diperhatikan, minimal sobat mengenal tag pembuka dan penutup pada HTML dan usahakan artikel tidak copy paste dari Microsoft Word maupun situs lainnya.
Ikuti tutorial di bawah ini untuk memasang Mini Slider pada Postingan blog sobat :
Masuk ke Blogger > Tema > Edit HTML
Letakan CSS Style berikut ini tepat di atas kode
]]></b:skin> atau </style>/* CSS Blanter Mini Slider */
.slide-wrap{margin:30px 0;overflow:hidden;position:relative}
.slide-wrap ul li a img{height:309px;width:100%}
.blanter-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}
.blanter-wrap::-webkit-scrollbar{width:8px;height:8px;border-radius:10px}
.blanter-wrap::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:10px}
.blanter-wrap::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
.blanter-wrap::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out;border-radius:10px}
Letakan Script berikut ini tepat di atas kode
</body><script type='text/javascript'>
//<![CDATA[
// Scroll
$('a.right-b').click(function() {
$('.blanter-wrap').animate({
scrollLeft: "+=500px"
}, "normal");
});
$('a.left-b').click(function() {
$('.blanter-wrap').animate({
scrollLeft: "-=500px"
}, "normal");
});
//]]>
</script>
Simpan Template.
Selanjutnya silahkan sobat masuk ke Edit Postingan > Mode HTML > Letakan kode berikut di tempat yang sobat inginkan.
<div class="slide-wrap">
<div class="blanter-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&showinfo=1"></iframe>
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivR4czQPTKryhPWIjG6j_z4Kmw20atWHnira8uEahX__wkO5zEbZWxPS9656edgXJkF8QRVxNRomDcKgBqP14GM2wD2anE_wrLkWmsQ-q2AvWhg7JQ3tRGuAQs7nSjfaVx_sFw23W4OT0/s1600/RoC.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI3pZCkL9_aOJICM23grc8WbVo6bL_VnwNi98wY2XtyVPQgzmTfl5vHOHw8Tdj7X-MhstBonsSm7aOnWGGwJHUexKWsSeLAlK8g65AbZHP8qT-RHR9dc8DyKQK8iQ9oevK5SFExWl8GiY/s1600/RoC2.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic1ZnAIberYxu4ITquzpI17Klw_AxrNtrCzgeWNy-j3HBE-B8zXCfMRjN-LTEVhDb44FseOQqCuMYOa1WfAkWFMyaGAWR2enDdhA6baqHOjC3QhT7FGJ4-ERoKwMPifBawqw9J0aYxh_o/s1600/RoC3.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBfo_CfK3PgQeSzxVOFJ475wv3ECpXz-Vzb-6uGSaQeL_04RfCmlx55MuNHJbRgRenkZqjNDga4D-p7CX5cEMOgdZRnrVne00OZEgOQ8ksAWx6MjalWDcCemPO2nbUKw9daIOA_wr4Wo/s1600/RoC4.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj63MSrv49vKAzZ89RBcbQK4YV78U-cBo09GL3b6x3fPrwkWb2rko3c-phbXp4iRgsFnOwxzbrLosnSqU34eti3d4xb5fhnAPAAVBWkVUJHuX3AUHHGr62eB1R43dbuDCRQpvyAGHhimqA/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>
Simpan.
Cek Video Berikut untuk melihat tutorial secara visual. 😬
Itulah tutorial Cara Membuat Mini Slider Ringan dan Responsive di Postingan Blog, jangan lupa Komentar dan Subscribe blog ini untuk mendapatkan update terbaru di blog ini. 😁😍