Membuat slider gambar atau Slideshow di blogspot

Cara membuat slideshow gambar pada postingan blog - Slideshow atau Carousel atau Slider gambar yang saya ketik pada kolom pencarian google. Waktu itu saya mencari artikel seperti ini untuk keperluan artikel pada blog saya yang lain, dimana blog tersebut selalu membuat artikel tentang Game dan hal tersebut mengharuskan saya untuk selalu menambahkan tangkapan layar pada game yang akan dibuat sebagai artikel.

Dan supaya artikel saya tidak terlalu penuh dengan gambar saya mengunakan cara ini untuk mengatasinya,  setelah beberapa kali saya mencoba menerapkan beberapa Slideshow yang saya temukan, saya menemukan Slideshow yang tidak terlalu susah untuk diterapkan, saya mendapatkan Slideshow ini dari blog nya mas Chaidir dan saya ubah sedikit agar sesuai dengan blog yang kebanyakan sudah menggunakan template responsive dan bisa di lihat pada versi mobile. Dan berikut adalah tampilan Slideshow yang saya modifikasi dari mas Chaidir.

Cara memasang nya pun sangatlah mudah, kamu tinggal copy paste saja skrip dibawah ini.

doble click to select

<style>.boxslider { padding: 10px 0px 55px 0; } .slide { position:relative; margin:0 auto; width:330px; height:190px; overflow:hidden } .slide input { display:block; position:absolute; width:10%; height:30px; right:0; top:0; opacity:.1; cursor:pointer; margin:75px 15px; padding:0 } .slide img { visibility:hidden; opacity:0; height:auto; position:absolute; left:0; top:0; width:320px; border:2px solid #ddd; border-radius:8px; transition:all .5s ease-out } .slide input:checked + img { visibility:visible; opacity:1 } .slide input:checked { display:none } .slide input:nth-child(1) { z-index:13 } .slide input:nth-child(3) { z-index:12 } .slide input:nth-child(5) { z-index:11 } .slide input:nth-child(7) { z-index:10 } .slide input:nth-child(1):checked ~ input:nth-child(3), .slide input:nth-child(3):checked ~ input:nth-child(5), .slide input:nth-child(5):checked ~ input:nth-child(7) { z-index:15 } .buttonslide { text-align: right; position: relative; margin: -115px 0 0 270px; right: px; width: 30px; opacity: .7; } .sscaption9t { text-align: right; position: absolute; margin: 40px 0px 0px -70px; font-weight: bold; } .sscaption9t span { background: white; padding: 3px 5px 3px 5px; border-radius: 10px; opacity: .8; } </style>

doble click to select

<div align="center" class="boxslider"><div class="slide"><input checked="checked" name="radio-set" type="radio" /> <img alt="Judul Gambar" src="URL Gambar" title="Judul Gambar" /> <input name="radio-set" type="radio" /> <img alt="Judul Gambar" src="URL Gambar" title="Judul Gambar" /> <input name="radio-set" type="radio" /> <img alt="Judul Gambar" src="URL Gambar" title="Judul Gambar" /> <input name="radio-set" type="radio" /> <img alt="Judul Gambar" src="URL Gambar" title="Judul Gambar" /></div><div class="buttonslide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfdRehpNFGG2Eyz8g0X7C4ZfSer90_b04iMwodcnPSSHxCTwz6CyAWSAflmpc5S0aSgZO7VjQos9TUEruTqGlDdDIfkR8206dUssFbKY7B6vnKCiow4ZgGzLKqymf6Q4I6lLAel7NPtc/s320/arrow.png" width="320" /></div></div>

Salin kedua skrip di atas kemudian tempelkan keduanya pada postingan yang akan kamu buat, atau bisa juga kamu menyimpan skrip CSS secara terpisah  dengan cara menyimpannya di kolom widget dan skrip HTML kamu paste pada postingan yang akan kamu buat.

Dengan begitu setiap kamu akan menambahkan Slideshow ini pada setiap postingan, kamu tinggal menambahkan skrip HTML nya saja karena skrip tersebut secara otomatis memanggil CSS yang sudah tersimpan di widget.

Untuk judul gambar silahkan kamu isi sesuai dengan isi postingan kamu atau samakan dengan judul postingan. Kemudian untuk URL GAMBAR kamu ganti dengan URL GAMBAR yang akan kamu gunakan dan untuk k bentuk, posisi, ukuran atau lainnya kamu bisa mengubahnya pada skrip CSS

Nah jadi itulah tadi ulasan saya tentang menambahkan Slideshow pada postingan, semoga artikel bermanfaat, terimakasih.