Cara Membuat Slider di Postingan Blog Yang Ringan

5/5 (1)

Hay teman-teman sahabat lapaklama.com, Sebelumnya saya minta maaf ya udah 2 hari ini saya tidak update artikel karena ada kesibukan di dunia offline, Pada kesempatan kali ini saya ingin membagikan panduan Cara Membuat Slider di Postingan Blog Yang Ringan. Panduan ini saya dapatkan dari blog idblanter.

Panduan membuat slider di Postingan blog ini tidak hanya bisa kamu gunakan untuk menampilkan gambar saja, Namun bisa juga kamu gunakan untuk menampilkan video youtube.

Kalau di kasih slider pasti loading blog jadi berat donk bang?

Tidak. Slider yang akan kita buat ini sangatlah ringan. Hal ini dikarenakan slider ini dibuat dengan meminimalkan penggunaan script jQuery. selain itu karena slider ini menggunakan efek klik kanan dan kiri dengan metode scroll yang berada dibagian bawah slider.Membuat Slider di Postingan Blog

Selain sangat ringan panduan membuat slider di postingan blog ini juga responsive yang mana tampilannya akan menyesuaikan dengan ukuran layar yang digunakan pengunjung blog kita. dan kamu bisa memasang gambar dengan ukuran horizontal ataupun vertikal.

Apakah bisa menempatkan slider gambar dan video secara bersamaan ?

Meletakan slider gambar dan video secara bersamaan bisa kamu lakukan tanpa masalah, yang saya maksud bersamaan disini adalah Slider 1 Gambar kemudian Slider 2 Video. (Panduan ini  tidak bisa kamu gunakan untuk menampilkan iklan adsense)

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://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>

Live Demo

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. Karena loading blog merupakan faktor penting dalam seo.

Nilai Kualitas Konten

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *