Cara Mudah Membuat Slide Show Atau Slider Pada Blogger

Selain menggunakan template, baru-baru ini muncul tren terbaru mempercantik blog dengan Slide Show atau Slider. Pemasangan Slide Show pada blog berguna untuk menampilkan konten gambar otomatis yang dilengkapi dengan judul tautan link ke sebuah artikel. Dan nantinya, Slide Show artikel-artikel tersebut akan diterapkan pada halaman depan atau Homepage, di antara halaman posting artikel, atau di mana saja sesuai keinginan.

Meskipun bukan hal yang harus dilakukan, nyatanya dengan membuat Slide Show blog akan terlihat lebih menarik dan berwarna. Selain itu juga bisa meningkatkan CTR (rasio klik-tayang) blog Anda dan mengurangi waktu loading/ pemuatan di halaman blog Anda, karena semua gambar tidak dimuat secara bersamaan seperti biasanya.

Tampilan menarik tentunya akan membuat pengunjung tertarik dan penasaran untuk membaca artikel yang ditampilkan di Slide Show. Ada berbagai pilihan tampilan Slide Show, seperti slide gambar yang ditampilkan berjejer dan kemudian bergeser bergantian. Atau ada juga slide gambar yang bergerak selang-seling dalam satu kotak gambar, dan lain sebagainya.

Baca Juga : 7 Aplikasi Timbangan Berat Badan yang Bantu Diet Jadi Sukses

Pada artikel kali ini, kita akan membahas bagaimana cara membuat Slide Show atau Slider pada blog Blogger.

Cara Menambahkan Slide Show Pada Blog

Slide Show bisa dibuat secara manual mau pun otomatis. Anda dapat menerapkan JavaScript murni tanpa JQuery, atau manual/ otomatis menambahkan Slide Show pada WordPress dan Blogger menggunakan HTML sederhana dan beberapa modifikasi dengan dasar CSS.

Berikut ini langkah-langkah membuat Slide Show pada blog Blogger :

1. Masuk ke akun Blogger Anda.

2. Klik menu “Layout” atau “Tata Letak”.

3. Klik “Add Gadget” atau “Tambahkan Gadget”, kemudian pilih opsi “HTML/ JavaScript”.

4. Copy code script di bawah ini dan paste ke dalam kotak yang tersedia.
<div class=”slideshow-container”>
<div class=”mySlides fade”>
<div class=”numbertext”>1 / 3</div>
<img src=”URL Gambar 1” style=”width:100%”>
<div class=”text”>Judul Gambar 1</div>
</div>
<div class=”mySlides fade”>
<div class=”numbertext”>2 / 3</div>
<img src=”URL Gambar 2″ style=”width:100%”>
<div class=”text”>Judul Gambar 2</div>
</div>
<div class=”mySlides fade”>
<div class=”numbertext”>3 / 3</div>
<img src=”URL Gambar 3″ style=”width:100%”>
<div class=”text”>Judul Gambar 3</div>
</div>
<a class=”prev” onclick=”plusSlides(-1)”>❮</a>
<a class=”next” onclick=”plusSlides(1)”>❯</a>
</div>
<br>
<div style=”text-align:center”>
<span class=”dot” onclick=”currentSlide(1)”></span>
<span class=”dot” onclick=”currentSlide(2)”></span>
<span class=”dot” onclick=”currentSlide(3)”></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName(“mySlides”);
var dots = document.getElementsByClassName(“dot”);
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length} ;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = “none”;
}
for (i = 0; i < dots.length; i++) { dots[i].classList.remove(“active”);
}
slides[slideIndex-1].style.display = “block”;
dots[slideIndex-1].classList.add(“active”);
}</script>
Catatan :
Untuk menambahkan tautan link artikel silahkan ganti kode script ini
<div class=”text”>Judul Gambar</div>
dengan kode script berikut
<div class=”text”><a href=”Tambahkan Link Di Sini”>Judul Gambar</a></div>

5. Terakhir, klik “Save” atau “Simpan” dan lihat hasilnya.

Anda juga dapat memodifikasi Slide Show Anda dengan pergi ke menu Template > Customize > Advanced > Add CSS, kemudian silahkan copy dan paste script code CSS di bawah ini :
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 0;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the “next button” to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4} to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.slprev, .slnext,.text {font-size: 11px}
}
Simpulan

Tak dipungkiri bahwa Slide Show adalah salah satu cara terbaik untuk menampilkan banyak informasi halaman artikel dalam ruang kecil dengan disertai tambahan fungsi tampilan yang cantik dan simpel. Semoga cara menambahkan Slide Show pada Blogger dalam artikel ini membantu!

Baca Juga : Wajib Dicoba ! Rekomendasi Cara Agar Wifi Indihome Tidak Lemot