Skip to main content

Widget Slider Horizontal Random Post Blogger Otomatis



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.

Comments

Post a Comment

Popular posts from this blog

Alasan Kode Adsense Menurunkan Performa Blog Dan Cara Mengatasinya

  Kenapa Performa Blogger Otomatis Menurun Jika Di Pasangkan Kode Script Google Adsense. Padahal Sebelum Kode Script Adsense Dipasang Performa Blogger Ijo Dengan Nilai 97, sedangkan Setelah akode Adsense Dipasang Performa Blogger Otomatis menurun Menjadi Kuning Dengan Nilai 62. Pada Kesempatan Kali Ini Saya Akan Membahas Alasan Kode Script Google Adsense Bisa Menurunkan Performa Blogger Dan Cara Mengatasinya. Alasan Kode Script AdSense Menurunkan Performa Blogger , Monetisasi blog menggunakan Google AdSense adalah salah satu cara paling populer untuk mendapatkan penghasilan dari konten yang kita buat. Banyak pemilik blog yang memilih Google AdSense karena mudah diintegrasikan dan memiliki jangkauan iklan yang luas. Namun, ada masalah yang sering muncul setelah memasang kode AdSense pada blog, yaitu penurunan performa blog. Artikel ini akan membahas secara mendalam. alasan kode AdSense menurunkan performa blog, serta bagaimana cara mengatasinya. Berikut adalah alasan Kode Script Goo...
Post a Comment
Read more

Membuat Widget CV Generator Di Blogger

 Cara Membuat Widget CV Lamaran Kerja Secara Otomatis di Blogger: Solusi untuk Generasi Z Banyak anggota Generasi Z saat ini menghadapi tantangan dalam melamar pekerjaan, terutama ketika mereka tidak memiliki Curriculum Vitae (CV) yang memadai atau tidak tahu cara membuat CV yang baik dan benar. Ini menjadi peluang emas bagi para blogger untuk membantu audiens yang tengah mencari solusi praktis dalam menyusun CV dengan mudah. Dengan membuat widget yang memungkinkan pembuatan CV secara otomatis, para konten kreator dapat memberikan nilai tambah bagi pengunjung blog mereka. Apa Itu Curriculum Vitae (CV)? Curriculum Vitae, sering disingkat CV, adalah dokumen penting yang merangkum riwayat hidup, pendidikan, pengalaman kerja, keterampilan, dan prestasi individu. CV sering digunakan dalam proses pencarian kerja sebagai alat untuk memberikan gambaran menyeluruh kepada calon pemberi kerja mengenai latar belakang profesional dan akademis seseorang.  Berikut adalah beberapa elemen kunc...
Post a Comment
Read more

Membuat Permalink Custom Di Blogger Yang Benar

 Cara membuat custom pemalink di blogger / blogspot yang benar untuk optimasi seo artikel agar lebih berkualitas dan seo friendly. Cara Membuat Permalink Custom Blogger yang Benar: Panduan Lengkap Menulis Artikel Blog  Permalink adalah elemen penting dalam SEO yang sering diabaikan oleh para blogger pemula. Di Blogger, permalink adalah URL yang ditetapkan untuk setiap postingan. Sebagian besar pengguna Blogger cenderung membiarkan permalink diatur secara otomatis, padahal membuat permalink kustom dapat meningkatkan optimasi mesin pencari (SEO) dan memudahkan pembaca menemukan artikel Anda. Artikel ini akan membahas **cara membuat permalink custom di Blogger yang benar**, serta bagaimana cara memanfaatkannya untuk meningkatkan ranking di Google. Ketahui Apa Itu Permalink Di Blogger? Sebelum kita masuk ke dalam panduan teknis, penting untuk memahami apa itu permalink. Permalink adalah URL tetap yang digunakan untuk menampilkan postingan atau halaman tertentu di situs web Anda. ...
Post a Comment
Read more