Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Mini Slider Gambar pada Postingan Blog Website

Website yang unik dan menarik tentunya akan membawa dampak positif pada kualitas dan kuantitas website itu sendiri. Salah satunya adalah Slider Gambar Ringan yang disisipkan pada sebuah postingan blog.

Ini akan memberikan kesan epik sekaligus menarik. Selain itu, pengguna internet bisa lama-lama di situs web anda dengan keunikan web yang tentunya harus kece badai.
Nah, inilah cara membuat Mini Slider Gambar pada Postingan Website sebagai berikut.
1. Masuk ke dashboard Blogger anda.
2. Klik menu Tema >> Edit HTML.
3. Silakan copy kode CSS Style di bawah ini dan paste/letakan diatas 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}
4. Letakan script di bawah ini tepat diatas </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>
5. Simpan Template/Tema.
6. Silakan masuk ke menu Tata Letak >> Widget >> HTML/Javascript atau ke Edit Postingan >> Mode HTML lalu letakan kode dibawah ini.
<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="Judul Gambar" src="https://2.bp.blogspot.com/-Zv_Y_O7-Ap0/W8vYbA2b2dI/AAAAAAAAKsE/H5-Ongllea8LCOZELOXQ_Hm3NOwW8pSAwCLcBGAs/s1600/RoC.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://2.bp.blogspot.com/-jT6c0VTad-g/W8vYWKUiloI/AAAAAAAAKr4/q0cqMpikNlcAefIKx-W_Y1sGu-RAT_WKwCLcBGAs/s1600/RoC2.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://4.bp.blogspot.com/-eW-DPRBJLZk/W8vYWEn59qI/AAAAAAAAKr0/P1RVlx5my_EurZTLdDmheiFNAQSdQ2ETwCLcBGAs/s1600/RoC3.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://2.bp.blogspot.com/-_LxNeAWme0Q/W8vYXm3goyI/AAAAAAAAKsA/xy97wbOFk-QLddM1VFEAws5_l5DfVwTGgCLcBGAs/s1600/RoC4.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://3.bp.blogspot.com/-rzt4aeynB4g/W8vYXnLHknI/AAAAAAAAKr8/G2NZFqzDDq8vihc8K5iJANdakodG5YBWwCLcBGAs/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>
7. Ubah yang berwarna biru (Judul Gambar dan link url Gambar) sesuai keinginan anda dan simpan. simpan dan lihat hasilnya di website atau postingan blog anda.
Heri MS
Heri MS Blogger Influencer dari Kuningan yang suka dengan dunia IT, Data Technology, website dan senang bereksplorasi tentang Ipteks. Semoga artikel saya ini bisa antik, otentik, asyik, unik dan menarik.

Posting Komentar untuk "Cara Membuat Mini Slider Gambar pada Postingan Blog Website"