Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini! ×

Cara Memasang Featured Slider Images Simple dan Elegan di Blogspot

Cara Memasang Featured Slider Images Simple dan Elegan di Blogspot Images @rian_seo
12 Share
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 copyright.

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.

Cara Memasang Featured Slider Images Simple dan Elegan di Blogspot
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>

Cara Memasang Featured Slider Images Simple dan Elegan di Blogspot
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.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

Komentar (0)

Post a Comment

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter