Hay teman-teman sahabat lapaklama.com, Sebelumnya saya minta maaf ya udah 2 hari ini saya tidak update artikel alasannya 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 menciptakan slider di Postingan blog ini tidak hanya sanggup kau gunakan untuk menampilkan gambar saja, Namun sanggup juga kau gunakan untuk menampilkan video youtube.
Kalau di kasih slider niscaya loading blog jadi berat donk bang?
Tidak. Slider yang akan kita buat ini sangatlah ringan. Hal ini dikarenakan slider ini dibentuk dengan meminimalkan penggunaan script jQuery. selain itu alasannya slider ini memakai dampak klik kanan dan kiri dengan metode scroll yang berada dibagian bawah slider.
Selain sangat ringan panduan menciptakan slider di postingan blog ini juga responsive yang mana tampilannya akan menyesuaikan dengan ukuran layar yang dipakai pengunjung blog kita. dan kau sanggup memasang gambar dengan ukuran horizontal ataupun vertikal.
Apakah sanggup menempatkan slider gambar dan video secara bersamaan ?
Meletakan slider gambar dan video secara bersamaan sanggup kau lakukan tanpa masalah, yang saya maksud bersamaan disini yaitu Slider 1 Gambar lalu Slider 2 Video. (Panduan ini tidak sanggup kau gunakan untuk menampilkan iklan adsense)
Panduan Membuat Slider di Postingan Blog
Panduan 1: Buka halaman dasboard blogger kau di blogger.com
Panduan 2: Kemudian pilih sajian 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 sempurna 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 aba-aba ini diatas kode </body>
<script type='text/j4vascript'>
//<![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 kau sudah tamat melaksanakan penyetingan di sajian Edit HTML template. Langkah berikutnya yaitu menempatkan aba-aba dibawah ini pada postingan artikel yang ingin kau tampilkan slider.
<div class="slide-wrap">
<div class="blanter-wrap">
<ul>
<li>
<a class="youtube-iframe" href="j4vascript: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="j4vascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBjPZd-j03nWFpnbv7mSTmonReaMt1bCwLNFGSPmCMtoi1OZTiRzmmhcaluNUEYOd-AWfITh9su5vaGOFD3JqpnCDSqATNglf6weFBf70m3crKwUKxr-04VfkvRsAZbZslQggjZmSm_hk/s1600/RoC.jpg" title="Judul Gambar" />
</a>
<a href="j4vascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEuKd1N2CHJaOXxVMHW3GyXeA9K7OQOVkiTiyp8ask-rKTTovcuRwvFFHCvrLxvV7GOw04nNL5OuvGSMUn3GWpbbioxxaMs2iaP3Hup4ZNziIInmjNf_TlnFClrow-abdBadSewk3usJc/s1600/RoC2.jpg" title="Judul Gambar" />
</a>
<a href="j4vascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibOQCq4VApAkRU7W1Y-mztNbUPsqe4_14KYb-Kzxl3p2584fp7ZMnqYzVYUH7gOvdjFNCYjmV4-cF28B0yuSlV6BKe-ZRYoJtEOku-bEbEc1EfRIrpZSD-OHHgeAfo_Y3CLyVaVHzZeoc/s1600/RoC3.jpg" title="Judul Gambar" />
</a>
<a href="j4vascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTsNwnHKbe_MuPPd1NdWoCQsjJRiml699v6UfKs1tHmU8wUQ4kMRJY-h5r5_sUs3c4CDLpkv0yt2Vq9QzO9qSgWY1b5IiJu8ezQrl3YhCrOaOX6BGmiU8QMW1lb3nnDhBPZ5T3ir5LfLc/s1600/RoC4.jpg" title="Judul Gambar" />
</a>
<a href="j4vascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1OuuhjffzeKgKo0BOHcQf69a7OeAwFO_DUNAYv8E18yS9kUnmvHaQajFB9Za9_rG91WEds8GiDWm6I97YpLMREzrtNA-nXeHGxP0a1TaRByJkNOVVbOYyCykh3FeRwBmwd0k3iiaXBbc/s1600/RoC5.jpg" title="Judul Gambar" />
</a>
</li>
</ul>
</div>
<a class="left-b" href="j4vascript: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="j4vascript: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 sanggup membantu teman-teman yang ingin menciptakan sajian slider di blog yang ringan dan tidak membebani loading blog. Karena loading blog merupakan faktor penting dalam seo.
Sumber aciknadzirah.blogspot.com