Membuat Slider Ringan di Postingan Blog

Panduan Membuat Slider di Postingan Blog

Panduan 1: Buka halaman dasboard blogger kamu di blogger.com

Panduan 2: Kemudian pilih menu Tema/Template dan klik Edit HTML.

Panduan 3: Silahkan cari kode ]]></b:skin> atau kode </style> (Gunakan kombinasi tombol CTRL + F secara bersamaan untuk mempermudah menemukan script/code tersebut).

Panduan 4: Letakan script CSS Style ini tepat diatas kode ]]></b:skin> atau kode </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}

Panduan 5: Kemudian cari lagi kode </body> dan letakan kode ini diatas 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>

Panduan 5: Jika sudah jangan lupa klik save template.

Sampai tahap ini kamu sudah selesai melakukan penyetingan di menu Edit HTML template. Langkah berikutnya adalah menempatkan kode dibawah ini pada postingan artikel yang ingin kamu tampilkan slider.

<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/AVvXsEhSUc9Y1VMqePhVptQZyYA2owasqHcAKsRkQAQQ0PDP3HAr6mPv_Ii5-0luq-dTlWOXtECPmFDrSIxwf5JFgZb9ubZ_88SF1KpR5kEUY1CvVQM4_cmN0o009n3FDYl1ImzUgFz0Pxb8H-0/s1600/RoC.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwd8iDEBOID0J3er5zxcxFokOMkiOFTChQxt5Kq1XC6BBhDWWoPBmiWLfFCCNFvDQ9DTh7Gw7fAI8mBDAuwTiFPFU6hog2DRN6tEJIptJoYaFcPKOFUMPZubkMcDbSjk-RUP8QS3MAOCk/s1600/RoC2.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbQi0KA7pU0TTGuqINzbwe57qg4TREysZOzzy9pRXf8TWTD1W7VcBi4vF52h5z_NhXWwJAuuV7umkwqoQVobrs4RRevzgB4pgw_IK-bDVBpu87STTfBDKyNqResrmVkz1RdOxNKfoX59o/s1600/RoC3.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWTUrDRk1FPaADNPr5JfHcyk0nZ_ghSyhW-M3fUWZOOuRBD-DVYw93xBSp-Caazo0gaS0Ix3kHlFV0M9i2VDcrVi0KBMfXCCj5AZS_MXc9xeM3lE5oF958uox4zGit9OtQ9SzENCW7zz8/s1600/RoC4.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNOZ79_BIqgBXHGzf_7HTumU40wLyWbBih6URGyRcbCsteliMb3tFilpEKO6UM9JOtL6ctDRL3s7ktAwowUaRiNcBioVd3uiMX4vhrGKz0ecvjVTJ__LiIg3HJnzGgYLczNItWVQdueIw/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>

Selesai. Terimakasih telah membaca panduan Cara Membuat Slider di Postingan Blog Yang Ringan, Semoga dengan artikel ini bisa membantu teman-teman yang ingin membuat menu slider di blog yang ringan dan tidak membebani loading blog. Selamat mencoba....