Widget Slider Horizontal Random Post Blogger Otomatis

Table of Contents

Cara membuat widget slideshow random post otomatis di blogspot, membuat widget slider horizontal random post Blogger otomatis, membuat widget random post otomatis di blogger/blogspot.

Pada kesempatan kali ini saya akan membagikan tutorial cara membuat widget slider / slidershow random post otomatis di blogspot.

Yang membedakan kode slider random post milik saya dengan milik orang lain yaitu:

1. Pilihan tampilan slider random post otomatis di blogspot bisa bergeser secara otomatis (slideshow).

DEMO 1

2. Pilihan tampilan slider random post otomatis di blogger yang kedua bisa di geser ke kanan ke kiri oleh pengguna tanpa slideshow otomatis.

DEMO 2

Cara Membuat Widget Slider ( Slideshow) Di Blogger/Blogspot 

Berikut adalah kode yang saya bagikan untuk membuat slider (slidershow) di blogspot yang bisa kamu pilih.

Kode slider random post horizontal otomatis (DEMO 1)

1. Langkah pertama silahkan kamu pasang kode CSS berikut ini di pengaturan CSS template blogger kamu.

.slider-container {

  width: 100%;

  overflow-x: auto; /* Mengaktifkan scrolling horizontal */

  overflow-y: hidden; /* Menyembunyikan scrollbar vertikal */

  white-space: nowrap; /* Memastikan item slider berada di satu baris */

  scroll-snap-type: x mandatory; /* Menambahkan efek snap saat di-scroll */

  -webkit-overflow-scrolling: touch; /* Agar lebih smooth di perangkat mobile */

}

.slider {

  display: flex;

  flex-wrap: nowrap;

  transition: transform 0.5s ease;

}

.slider-item {

  min-width: 100%; /* Sesuaikan agar item terlihat lebih kecil */

  flex: 0 0 auto; /* Mencegah item mengecil */

  transition: 0.5s;

  height: 70%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 5px 0;

  scroll-snap-align: start; /* Efek snap */

  position: relative;

}

.slider-box {

  width: 95%;

  height:200px;

  background-color: #fff;

  border-radius: 10px;

  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);

  overflow: hidden;

  text-align: left;

  padding: 0;

  position: relative; /* Tambahkan agar judul berada di dalam box */

}

.slider-item img {

  width: 100%;

  height: 130px;

  object-fit: cover;

  display: block;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px;

  margin: 0;

}

.slider-title {

  position: absolute;

  bottom: 0; /* Memindahkan posisi ke bawah gambar */

  left: 0;

  width: 100%;

  background-color: rgba(246, 230, 230, 0.8); /* Warna #f6e6e6 dengan transparansi 80% */

  color: #4f7f96; /* Warna teks abu-abu (grey) */

  padding: 10px;

  box-sizing: border-box;

  text-align: center;

  font-size: 18px;

  border-bottom-left-radius: 10px;

  border-bottom-right-radius: 10px;

  word-wrap: break-word; /* Agar judul tidak terpotong */

  white-space: normal; /* Memungkinkan teks berbaris baru */

  overflow: visible; /* Biarkan teks tampil semua */

}

/* Menyembunyikan scrollbar di perangkat desktop */

.slider-container::-webkit-scrollbar {

  display: none;

}

.slider-container {

  -ms-overflow-style: none;  /* IE dan Edge */

  scrollbar-width: none;  /* Firefox */

}

2. Langkah berikutnya pasang kode html dibawah ini di layout tata letak Blogspot kamu.

<!-- HTML untuk Slider Random Post -->

<div class="slider-container">

  <div class="slider" id="random-post-slider">

    <!-- Isi Slider akan di-generate otomatis oleh JavaScript -->

  </div>

</div>

3. Kemudian pasang kode javascript berikut tepat di atas kode </body>

<!-- Script untuk mengambil postingan acak -->

<script>

function randomizePosts() {

  var slider = document.querySelector('#random-post-slider');

 fetch('https://www.carangeblog.com/feeds/posts/default?alt=json&max-results=4')

  .then(response => response.json())

  .then(data => {

    var entries = data.feed.entry;

    var html = '';

    for (var i = 0; i < entries.length; i++) {

      var post = entries[i];

      var link = post.link.find(l => l.rel === "alternate").href;

      var content = post.content ? post.content.$t : post.summary.$t;

      var imgTag = content.match(/<img.*?src="(.*?)"/);

      var imgUrl = imgTag ? imgTag[1] : 'https://via.placeholder.com/800x400?text=No+Image';

      var title = post.title.$t;

      html += `

        <div class="slider-item">

          <div class="slider-box">

            <img src="${imgUrl}" alt="Post Image">

            <a href="${link}" target="_blank">

              <div class="slider-title">${title}</div>

            </a>

          </div>

        </div>

      `;

    }

    slider.innerHTML = html;

  });

}

window.onload = randomizePosts;

</script>

Kode Auto Slidershow Random Post Blogspot Otomatis (DEMO 2)

Langkah pertama silahkan kamu pasang kode cssnya di pengaturan CSS template blogger kamu ya.

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.slider {
  display: flex;
  animation: slide 20s infinite;
}
.slider-item {
  min-width: 100%;
  transition: 0.5s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0; /* Mengurangi padding atas dan bawah */
}
.slider-box {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  padding: 0; /* Menghapus padding agar gambar penuh */
}
.slider-item img {
  width: 100%;
  height: auto;
  display: block; /* Memastikan gambar memenuhi lebar kotak */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 0;
}
.slider-item h3 {
  font-size: 17px;
 margin: 15px 0 10px 0;
  font-weight: bold;
color:#86a7b7;
}
.slider-item p {
  font-size: 16px;
  color: #666;
  text-align: justify;
  margin: 10px 20px; /* Menambahkan sedikit margin dalam untuk deskripsi */
}
@keyframes slide {
  0% { transform: translateX(0); }
  20% { transform: translateX(0); }
  25% { transform: translateX(-100%); }
  45% { transform: translateX(-100%); }
  50% { transform: translateX(-200%); }
  70% { transform: translateX(-200%); }
  75% { transform: translateX(-300%); }
  100% { transform: translateX(-300%); }
}

Langkah berikutnya pasang kode javascript slidershow random post untuk blogspot tepat di atas code </body>

<!-- Script untuk mengambil postingan acak -->
<script>
function randomizePosts() {
  var slider = document.querySelector('#random-post-slider');
  fetch('https://www.carangeblog.com/feeds/posts/default?alt=json&max-results=4')
  .then(response => response.json())
  .then(data => {
    var entries = data.feed.entry;
    var html = '';

    for (var i = 0; i < entries.length; i++) {
      var post = entries[i];
      var title = post.title.$t;
      var link = post.link.find(l => l.rel === "alternate").href;
      var content = post.content ? post.content.$t : post.summary.$t;
      var imgTag = content.match(/<img.*?src="(.*?)"/);
      var imgUrl = imgTag ? imgTag[1] : 'https://via.placeholder.com/800x400?text=No+Image';
      var description = content.replace(/<[^>]+>/g, '').substring(0, 150) + '...'; // mengambil deskripsi singkat

      html += `
        <div class="slider-item">
          <div class="slider-box">
            <a href="${link}" target="_blank"><img src="${imgUrl}" alt="${title}"></a>
            <div style="padding: 15px;"> <!-- Membungkus judul dan deskripsi dengan padding -->
              <h3><a href="${link}" target="_blank">${title}</a></h3>
              <p>${description}</p>
            </div>
          </div>
        </div>
      `;
    }
    slider.innerHTML = html;
  });
}

window.onload = randomizePosts;
</script>

Langkah terakhir silahkan kamu pasang kode html dibawah di layout tata letak template blogger kamu. Kamu bebas mau naruh di sidebar ataupun dimanapun yang menurut kamu bagus.

<!-- HTML untuk Slider Random Post -->
<div class="slider-container">
  <div class="slider" id="random-post-slider">
    <!-- Isi Slider akan di-generate otomatis oleh JavaScript -->
  </div>
</div>

Jika sudah klik simpan dan lihat hasilnya dari kode widget slideshow random post barusan.

Baiklah sobat carangeblog itulah tutorial yang saya bagikan kali ini tentang Cara Membuat Slider Random Post Horizontal Yang Bisa Digeser kekiri dan kekanan. Dan cara Membuat slideshow otomatis random post blogspot.

Semoga Artikel yang saya bagikan bermanfaat untuk kamu. Wassalamu'alaikum.