Cara Memasang Featured Slider Images Simple dan Elegan di Blogspot

Ada banyak pertanyaan yang sering saya temukan dipesan Facebook tentang bagaimana sih mas bikin slider images yang keren di blogspot?

Jawabannya ada 2, pertama slider images ini bisa kita pasang dan diatur secara otomatis untuk tampilan post yang akan tampil.

Baca juga: Cara Memasang Slider Images Otomatis di Blogspot

Dan yang kedua, featured images post yang kita atur secara manual untuk bagian tampilan postnya, yang artinya hanya post atau gambar yang sudah kita tentukan untuk tampil dihalaman depan saja.

Lebih dari itu, mari langsung kita menuju langkahnya untuk tutorial pemasangan.

Tips Memasang Featured Slider Images di Blogger

Seperti langkah sebelumnya, kalian harus menyalin kode CSS yang ada dikotak bawah ini.

/* SLIDER */
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
  max-width: 1100px; - ATUR LEBAR SESUAI TEMPLATE ANDA
  position: relative;
  margin: auto;
}
/* Hide the images by default */
.mySlides {
  display: none;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
/* 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: 15px;
  width: 15px;
  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}
}

Letakan kode CSS diatas, tepat dibagian kode </style> atau ]]></b:skin>

Lalu salin lagi kode HTML dibawah ini.

<b:if cond='data:blog.homepageUrl == data:blog.url'> 
<!-- Slider Images -->
<div class='slideshow-container'>
  <div class='mySlides fade'>
    <div class='numbertext'/>
    <img src='https://ecs7.tokopedia.net/img/cache/1242/attachment/2019/5/23/28201197/28201197_06e91fcb-46d1-4f75-9a48-b1ea253d2694.png' style='width:100%;border-radius:20px'/>
    <div class='text'>Contoh Tawaran</div>
  </div>
  <div class='mySlides fade'>
    <div class='numbertext'/>
    <img src='https://ecs7.tokopedia.net/img/cache/1242/attachment/2019/5/27/26950746/26950746_829906fe-1129-45a8-800d-3364f7dea735.png' style='width:100%;border-radius:20px'/>
    <div class='text'>Contoh Iklan</div>
  </div>
  <div class='mySlides fade'>
    <div class='numbertext'/>
    <img src='https://ecs7.tokopedia.net/img/cache/1242/attachment/2019/5/27/28201197/28201197_1c1d30dc-c26b-4fc5-8bcb-59654acb91ef.jpg' style='width:100%;border-radius:20px'/>
    <div class='text'>Contoh Produk</div>
  </div>
  <a class='prev' onclick='plusSlides(-1)'>&#10094;</a>
  <a class='next' onclick='plusSlides(1)'>&#10095;</a>
</div>
<div style='text-align:center'>
  <span class='dot' onclick='currentSlide(1)'/> 
  <span class='dot' onclick='currentSlide(2)'/> 
  <span class='dot' onclick='currentSlide(3)'/> 
</div>
<!-- End -->
</b:if>

Penjelasan:

1. Tanda warna merah = adalah link gambar yang akan ditampilkan, kamu bisa gunakan gambar sesuai dengan keinginan kamu.
2. Tanda warna biru = isi tulisan yang akan kamu tampilkan, bisa kamu gunakan tulisan sebuah penawaran dengan teknik copywriting.

Letakan kode HTML diatas, antara kode template <div id='wrapper'> / <div class='wrapper'>. Pokoknya cari saja kode yang mirip-mirip seperti itu didalam file template blogger kamu.

images by boshjn.id

Masih dalam mode edit HTML, salin lagi kode JavaScript dibawah ini untuk menyempurnakan tampilannya.

<script>
//<![CDATA[
// Slider
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}
// Thumbnail image controls
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].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
}
//]]>
</script> 

Lalu letakan kode JavaScript tersebut tepat dibagian atas kode </body> atau bisa juga </head>

images by boshjn.id

Baca juga: Cara Membuat Featured Slider Image Blogspot Mirip Tema Newspaper WordPress

Untuk melihat hasilnya, coba klik " Pritinjau " dibagian edit HTML. Apakah sudah benar atau belum.

Contoh Halaman
Apabila tidak ada yang eror, lanjutkan dengan mengklik " SIMPAN / SAVE "

Penutup

Sampai pada langkah ini, saya rasa kamu sudah berhasil memasang featured image slider yang simple dan elegan diblogspot.

Jika ada pertanyaan lainnya tentang terjadinya eror atau tampilannya tidak bekerja pada template kamu, jangan ragu untuk menulis komentarnya di blog ini.

Berbagi :