Cara Menciptakan Mini Slider Ringan Di Postingan Blog

Halo Sobat Blanter, kembali lagi aku akan membagikan sebuah tutorial mini slider yang sanggup dipakai untuk video maupun gambar. Slider ini mempunyai fitur menyerupai slider pada umumnya, hanya saja slider ini sangat ringan dan hanya memakai sedikit bumbu jquery.

Slider ini sanggup ringan alasannya yakni hanya mengandalkan efek klik pada tombol kiri dan kanan dan juga bergerak dengan metode scroll, itulah mengapa slider ini juga mempunyai scroll pada bab bawahnya supaya memudahkan pengunjung untuk menentukan ingin memakai tombol atau scroll.

Ringan, namun tetap nyaman pada mode responsive, alasannya yakni sanggup di slide kiri dan kanan tanpa wajib menekan tombol panah. Ukuran gambar yang sanggup 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 pola saja 😁).

Info : Tutorial ini dilengkapi dengan video singkat di final post.

Perlu diperhatikan, minimal teman mengenal tag pembuka dan penutup pada HTML dan usahakan artikel tidak copy paste dari Microsoft Word maupun situs lainnya.

Demo

Ikuti tutorial di bawah ini untuk memasang Mini Slider pada Postingan blog teman :

Masuk ke Blogger > Tema > Edit HTML

Letakan CSS Style berikut ini sempurna di atas instruksi ]]></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 sempurna di atas instruksi </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 teman masuk ke Edit Postingan > Mode HTML > Letakan instruksi berikut di kawasan yang teman 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&amp;showinfo=1"></iframe> </a> <a href="javascript:void(0)"> <img alt="Cara Membuat Mini Slider Ringan di Postingan Blog Cara Membuat Mini Slider Ringan di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ5LA6u3EB6sh41TD4sasGBsG95xTyT8LhOIhiriEA0bNh9_2ra4zPprknMHiJs_KvHk9iS8-AhUSf4ldqOySGPp6hqyrY7imgaVkrhQwiNMTeIlewt3uw0pCDBa3ox7knWw9fMGIOWzg/s1600/RoC.jpg" title="Cara Membuat Mini Slider Ringan di Postingan Blog" /> </a> <a href="javascript:void(0)"> <img alt="Cara Membuat Mini Slider Ringan di Postingan Blog Cara Membuat Mini Slider Ringan di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLTZnzAcjqC6-NxpMtC4YeE_FM3xLJg9GBsOq2E6fh-x1HQF9XDlS7DwZNp7NJmsgPqDL0DRoflnVQqB3vf5D_T92vPu2LHFiRqPGa1bFXWdfLkdN-FUIjxraMIyVgAXuKAQl5sr1c7bU/s1600/RoC2.jpg" title="Cara Membuat Mini Slider Ringan di Postingan Blog" /> </a> <a href="javascript:void(0)"> <img alt="Cara Membuat Mini Slider Ringan di Postingan Blog Cara Membuat Mini Slider Ringan di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhweu2Di_SnAPAgUbq-lr_a4pyvmJ5s6Rw0TNkTlyd9DpfQJwzkCG62isEtd8VuCx08MeWtB-uT-jHeqE8Wmu5a4r51I60RE3ARGzL5Tsv9yQeUyzAdZsC8vrgOhad7nrOhl57qn8I1kzE/s1600/RoC3.jpg" title="Cara Membuat Mini Slider Ringan di Postingan Blog" /> </a> <a href="javascript:void(0)"> <img alt="Cara Membuat Mini Slider Ringan di Postingan Blog Cara Membuat Mini Slider Ringan di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK7ky_y6thZgZD9FuR8bM_u_9M76Iumjn829wxy8YrzCK8kI4Nid9CyHCRVH2Ou73wuLxrRLG1XaKBiQEFNGGqzl4ePKleuxPdWkOwi9wUcSi6n6EiRyGfEuJCgFFcpaEvWFIybgwDbUs/s1600/RoC4.jpg" title="Cara Membuat Mini Slider Ringan di Postingan Blog" /> </a> <a href="javascript:void(0)"> <img alt="Cara Membuat Mini Slider Ringan di Postingan Blog Cara Membuat Mini Slider Ringan di Postingan Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8m7WqhgDlIjo8Sm3Yax5Sd9JLkMHXGfZBOlhdTguiJF94gzJyvnR8mzNVa5OWoPdJ-htSHck5wLL-mOJAPPtNzBmZKDwxjo3dBiliqHYO61qgSA061hk-Gx7u_EakhjhvjSiVHw5zuTo/s1600/RoC5.jpg" title="Cara Membuat Mini Slider Ringan di Postingan Blog" /> </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.

Lihat Juga : Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog

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 mendapat update terbaru di blog ini. 😁😍

Sumber https://www.idblanter.com