20230823 215017

Image Slider Box Widget Blogspot

Diposting pada

Codepelajar – Sebagai seorang blogger, memiliki tampilan yang menarik dan visual yang estetis sangat penting untuk menarik perhatian pembaca dan meningkatkan interaksi. Salah satu cara efektif untuk mencapai itu adalah dengan menggunakan image slider pada platform blogging populer seperti Blogspot. Image slider adalah tampilan yang terdiri dari beberapa gambar yang diputar secara otomatis atau dengan diklik oleh pengunjung, menciptakan pengalaman yang dinamis dan menarik bagi pembaca.

Cara Membuat Image Slider Pada Blogspot

Silahkan buka Blogger tema > edit html salin css di bawah ini dan tempel di atas kode ]]></b:skin> atau di atas kode </style>

.mySlides{display:none}
.mySlides img {vertical-align:middle;width:100%}
.wrap-dot{text-align:center;margin-top:10px}
.slideshow-container{max-width:1000px;position:relative;margin:auto}
.slideshow-container .prev,.slideshow-container .next{cursor:pointer;position:absolute;top:50%;padding:7px 15px;margin:-22px 5px 0 5px;color:white;font-weight:bold;font-size:18px;transition:0.6s ease;border-radius:50%;user-select:none}
.slideshow-container .next{right:0}
.slideshow-container .prev:hover,.slideshow-container .next:hover{background-color:rgba(0,0,0,0.8)}
.slideshow-container .text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center}
.wrap-dot .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}
.wrap-dot .dot.active{background-color:#f89000;width:30px;border-radius:20px}
.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}}
@media only screen and (max-width:300px){.slideshow-container .prev,.slideshow-container .next,.slideshow-container .text{font-size:11px}}

Salin kode dibawah ini dan tempatkan di widget yang sesuai atau jika ingin menempatkannya diatas beranda maka cari kode </header> dan letakkan kode dibawah dengan dibungkus menggunakan kode <b:if cond=’data:view.isHomepage’></b:if>

<div class='slideshow-container'>
<div class='mySlides fade'>
  <a href='#'>
  <img src='https://www.w3schools.com/howto/img_snow_wide.jpg'/>
  <div class='text'>Caption Text</div>
  </a>
</div>

<div class='mySlides fade'>
  <a href='#'>
  <img src='https://www.w3schools.com/howto/img_mountains_wide.jpg'/>
  <div class='text'>Caption Two</div>
  </a>
</div>

<div class='mySlides fade'>
  <a href='#'>
  <img src='https://www.w3schools.com/howto/img_nature_wide.jpg'/>
  <div class='text'>Caption Three</div>
  </a>
</div>
<a class='prev' onclick='prevSlide()'>&#10094;</a>
<a class='next' onclick='showSlides()'>&#10095;</a>
</div>

<div class='wrap-dot'>
  <span class='dot'></span>
  <span class='dot'></span>
  <span class='dot'></span>
</div>

Oke mungkin itulah cara membuat widget slider otomatis pada blogspot, semoga blog Anda dapat menarik perhatian pengunjung dan terimakasih sudah membaca.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *