How to Make a Lightweight Mini Slider in Blog Posts

How to Make a Lightweight Mini Slider in Blog Posts
Monday, June 15, 2020

Go to Blogger Theme > Edit HTML
Put the following CSS Style directly above the code]]> </ b: skin> or </style>

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

Put the following script directly above the code </body>
<script type='text/javascript'>
//<![CDATA[
// Scroll
$('a.right-b').click(function() {
  $('.firefudh-wrap').animate({
    scrollLeft: "+=500px"
  }, "normal");
});
 $('a.left-b').click(function() {
  $('.firefudh-wrap').animate({
    scrollLeft: "-=500px"
  }, "normal");
});
//]]>
</script>
Save Template.
Next, please go to Edit > HTML Mode > Code Postings Put the following code where you want it.

<div class="slide-wrap">
<div class="firefudh-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://1.bp.blogspot.com/-U17TsFIuq7I/XuY0Ye91ZUI/AAAAAAAAGbc/xvU3qZhbA84mfT6EcyG4mk4I5ZrALMAlQCK4BGAsYHg/s684/Pict%2B1.png" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://1.bp.blogspot.com/-4Ne26YTza_s/XuY0RMr_xhI/AAAAAAAAGbQ/-C9XwvOZlIE5k6KCR-Lc2dm7GDjWajySgCK4BGAsYHg/s410/Pict%2B2.png" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://1.bp.blogspot.com/-uBO7RjjqvaU/XuY0eWJhCaI/AAAAAAAAGbo/YHl3jfL9MuQccgnNQVw4Nn9nHlmm77mrACK4BGAsYHg/s410/Pict%2B3.png" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://1.bp.blogspot.com/-pmve1H-YAJI/XuY0r-ZEaHI/AAAAAAAAGb8/ykkNEcjLSZMI3z0NzJ4_gxqZ9PSlqx-vgCK4BGAsYHg/s647/Pict%2B8.png" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://1.bp.blogspot.com/-zuntsJKT-W8/XuY00_ULHGI/AAAAAAAAGcI/uy98hnqyG2wJSDsVsnDseMmZr_KFjyllwCK4BGAsYHg/s802/Pict%2B15.png" 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>

0 Response to "How to Make a Lightweight Mini Slider in Blog Posts"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel