Gini Cara Membuat Slideshow di Postingan Blog Tanpa Ribet

Ada yang udah keburu cinta sama platform blogger dan lagi bingung cara membuat slideshow di postingan blog lewat dashboard?

I feel you, Mak!

Selain lumayan newbie-friendly dan efek hosting gratis yang selalu nyenengin, blogger juga ga susah banget untuk dimodifikasi. Another plus point when you’re just starting out, yes?

Cara Membuat slideshow Postingan di Blog

Salah satu fitur yang sering ditanyain, adalah fitur untuk upload beberapa foto di blog menggunakan tayangan slide. Fungsinya ya jadi slideshow yang muter otomatis list gambar pada halaman postingan.

Meksipun saya termasuk blogger yang ‘sederhana’ aka males, so getting it fancy isn’t really my style… tetep, add-on slideshow animasi ginian adalah fitur yang bisa bikin pengunjung lebih betah, with that fancier looking post of yours.

What’s more, settingnya pun ga susah kok. Selama kamu punya foto yang rapih ke simpen di Flickr atau Photobucket, kamu udah siap pakai layanan gadget slideshow dari blogger ini. 👇

Cara Membuat slideshow di Postingan Blog: Langkah 1

Log in ke tempat kamu simpen foto online, cari dan klik opsi “Bagikan” di sebelah album foto yang mau dijadikan slideshow.

Salin URL yang muncul di windows, dan copy dulu di file .txt di komputer kamu.

Kalau ada kesulitan, coba cari di halaman Bantuan atau FAQ. Masih ga bisa? Drop a comment below, ntar saya coba liat.

Sekarang, Sign in ke Dashboard Blogger…

Pindah tab ke blogger, sign-in dan pilih situs yang mau dimodifikasi pakai slideshow. Pilih menu tautan “Tata Letak”, lalu klik opsi “Tambahkan Gadget” yang bakal ngebuka jendela membuka jendela ‘Tambahkan Gadget’. Kemudian, silakan klik tautan “HTML/Javascript”, lalu pilih tanda tambah di sebelah kanan. Langkah ini bakal ngebuka jendela baru untuk masukin kode HTML.

Lalu masukin kode berikut:

<div class=”slideshow-container”><div class=”mySlides fade”>  <div class=”numbertext”>1 / 3</div>  <img src=”https://4.bp.blogspot.com/-wNkw6hH21jk/VvaS04wddAI/AAAAAAAAAC4/x040AhmgT58Af5y8hJbum-6GYZ-IMIzIg/s1600/407390.jpg” style=”width:100%”>  <div class=”text”>Caption Text</div></div><div class=”mySlides fade”>  <div class=”numbertext”>2 / 3</div>  <img src=”https://3.bp.blogspot.com/-loqlpbjsGhk/VvaS5FdFgSI/AAAAAAAAADA/ue16oH3yR9UnsDc1I_f9IqlI3mDB3TuTw/s1600/abstract-wallpapers-1080p-hd.jpg” style=”width:100%”>  <div class=”text”>Caption Two</div></div><div class=”mySlides fade”>  <div class=”numbertext”>3 / 3</div>  <img src=”https://2.bp.blogspot.com/-g-XrmxZSMR0/VvaS30_TsMI/AAAAAAAAAC8/-X4mDrDGJiIUY_Yr5zzOSNeyugdZp3i-A/s1600/fire-abstract-HD-wallpaper.jpg” style=”width:100%”>  <div class=”text”>Caption Three</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>

Itu URL yg dibold, diganti dengan URL image dari image hoster yang kamu simpen tadi, ya? Jangan lupa ganti caption one, two, three nya (yang dibold merah) ke caption kamu sendiri.

Kemudian masuk ke Tema > Customized > Advanced > Add CSS, lalu copy code CSS berikut ke kolom yang kosong;

 * {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}}

source: tuteinside.net

Udah selesai? Sekarang klik tombol “Simpan”.

Udah bisa, Mak?

Jadi gitu cara membuat slideshow di postingan blog, mak! Ribet? Mudah-mudahan nggak, ya. I honestly don’t know how to make this post longer. 😂 As a side note, kamu juga bisa menarik tayangan slide ke area lain di blog, loh.  Tinggal arahkan ke halaman Layout, lalu klik gadget tayangan slide dan letakkan di tempat yang kamu pingin. Aaandd.. you’re done!