Tutorial Membuat Slider Berita Sesuai Label Otomatis Blogspot Ala Ngerapik Blog

Salam, selamat malam menjelang pagi teman teman blogger. Apa kabar kalian semua hari ini beserta blog nya, sudahkan Menulis artikel blog anda untuk hari ini? Selamat menulis deh.. kali ini saya akan memberikan "Tutorial Membuat Slider Berita Sesuai Label Otomatis Blogspot Ala Ngerapik Blog" yang saya coding beserta Mode Ai yang malam kemarin sangat menjengkelkan. Ternyata ada juga lho Mode Ai yang menjengkelkan dalam merancang dan menyusun kode HTML blogger, saya sampai kesal karena banyak kesalahannya yang harus saya edit manual, ampe saya kata katain tuh Mode Ai..wkkkk, abis dongkol abis! Namun disini kita sebagai pilotnya jadi kita yang mengatur bagusnya kemana jagan sampai kita di putar sana sini oleh Mode Ai.

Nah.. untuk teman teman gak usah pakai dongkol saya telah edit kode nya sedemikian rupa agar juga bisa diaplikasikan di blog kesayangan teman teman semua. Penampakan dari kode ini seperti gambar dibawah ini dan cekidot wae untuk cara penerapannya.

PENERAPAN KODE HTML

Untuk menerapkan kode html ini di mode Edit HTML Template ya sobat blogger, dengan tekan CNTR+F dibox EDIT HTML lalu silahkan cari kode <main id='main-wrapper'> (ini khusus pada template starter yang saya gunakan di blog ngerapik ini, untuk template yang lain disesuaikan saja) biasanya terletak di bawah kode </header> setelah ditemukan tempelkan kode dibawah ini tepat dibawahnya, disini saya bagi menjadi dua kotak kode HTML untuk disalin. Kode kotak pertama terlebih dahulu ditempel lalu dilanjutkan kode Kotak kedua tepat dibawah kode Kotak pertama.

Kode bagian Kotak Pertama:

</> Kotak 1

<b:if cond='data:view.isHomepage'>  
  
  <div class='custom-slider-container'>
    <div class='custom-slider-wrapper' id='bloggerSliderWrapper'>
      <div class='slider-loading'>Memuat artikel otomatis...</div>
    </div>

<button class='custom-slider-btn next-btn' onclick='nextSlide()'>❯</button>
    <button class='custom-slider-btn prev-btn' onclick='prevSlide()'>❮</button>
  </div>

<style type='text/css'>
    .custom-slider-container {
      position: relative;
      width: 100%;
      max-width: 100%;
      margin: 20px auto;
      overflow: hidden;
      border-radius: 4px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #000;
    }
    .custom-slider-wrapper {
      position: relative;
      width: 100%;
      height: 450px;
    }
    .slider-loading {
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 16px;
    }
    .custom-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.6s ease-in-out;
      z-index: 1;
    }
    .custom-slide.active {
      opacity: 1;
      z-index: 2;
    }
    .custom-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .custom-slide::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 65%;
      background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
      z-index: 2;
    }
    .custom-slide-badge {
      position: absolute;
      top: 40px;
      left: 30px;
      background-color: #ff0022;
      color: #fff;
      padding: 5px 12px;
      font-size: 11px;
      font-weight: bold;
      text-transform: uppercase;
      z-index: 3;
      letter-spacing: 1px;
    }
    .custom-slide-content {
      position: absolute;
      bottom: 35px;
      left: 30px;
      right: 80px;
      color: #fff;
      z-index: 3;
    }
    .custom-slide-title {
      font-size: 26px;
      font-weight: 700;
      line-height: 1.3;
      margin: 0 0 10px 0;
    }
    .custom-slide-title a {
      color: #fff;
      text-decoration: none;
    }
    .custom-slide-title a:hover {
  color: #00ff66; /* Mengubah warna teks menjadi hijau neon Matrix */
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.8); /* Efek cahaya menyala ala hacker */
}
    .custom-slide-meta {
      font-size: 12px;
      color: #ccc;
      font-weight: 600;
      text-transform: uppercase;
    }
    .custom-slider-btn {
      position: absolute;
      right: 0;
      width: 45px;
      height: 45px;
      border: none;
      font-size: 16px;
      cursor: pointer;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s, color 0.3s;
    }
    .next-btn {
      bottom: 45px;
      background-color: #ff0022;
      color: #fff;
    }
    .next-btn:hover {
      background-color: #d6001c;
    }
    .prev-btn {
      bottom: 0;
      background-color: #fff;
      color: #000;
      border-top: 1px solid #eee;
    }
    .prev-btn:hover {
      background-color: #f5f5f5;
    }

@media (max-width: 768px) {
      .custom-slider-wrapper {
        height: 300px;
      }
      .custom-slide-badge {
        top: 20px;
        left: 15px;
      }
      .custom-slide-content {
        bottom: 20px;
        left: 15px;
        right: 60px;
      }
      .custom-slide-title {
        font-size: 16px;
      }
      .custom-slider-btn {
        width: 35px;
        height: 35px;
      }
      .next-btn {
        bottom: 35px;
      }
    }
  </style>

Kode bagian Kotak Kedua:

</> Kotak 2

<script type='text/javascript'>
    // <![CDATA[
    var currentSlide = 0;
    var slides = [];
    var slideInterval;

// === PENGATURAN WAJIB ===
    var jumlahPost = 15; // Jumlah slide berita terbaru yang ingin ditampilkan otomatis
    // =======================

function panggilSliderBlogger(json) {
      var wrapper = document.getElementById('bloggerSliderWrapper');
      if (!json.feed.entry || json.feed.entry.length === 0) {
        wrapper.innerHTML = '<div class="slider-loading">Tidak ada artikel terbaru ditemukan.</div>';
        return;
      }

var sliderHtml = '';
      var entries = json.feed.entry;

for (var i = 0; i < entries.length; i++) {
        var entry = entries[i];
        var title = entry.title.$t;
        var postUrl = '';

for (var j = 0; j < entry.link.length; j++) {
          if (entry.link[j].rel === 'alternate') {
            postUrl = entry.link[j].href;
            break;
          }
        }

var author = entry.author && entry.author[0] ? entry.author[0].name.$t : 'Admin';
        var rawDate = new Date(entry.published.$t);
        var months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
        var formattedDate = rawDate.getDate() + ' ' + months[rawDate.getMonth()] + ' ' + rawDate.getFullYear();

// Mengambil nama label artikel secara otomatis untuk dipasang di Badge Berita
        var labelOtomatis = 'Berita'; 
        if (entry.category && entry.category.length > 0) {
          labelOtomatis = entry.category[0].term;
        }

// Membersihkan URL gambar agar menjadi ukuran asli s1600 (Mendukung sistem penyimpanan Blogger lama & baru)
        if (thumbUrl.indexOf('://googleusercontent.com') !== -1) {
          thumbUrl = thumbUrl.split('=')[0] + '=s1600';
        } else if (thumbUrl.indexOf('blogspot.com') !== -1) {
          thumbUrl = thumbUrl.replace(/\/s72\-c/, '\/s1600')
                             .replace(/\/w72\-h72\-p\-k\-no\-nu/, '\/s1600')
                             .replace(/=s72\-c/, '=s1600')
                             .replace(/=w72\-h72\-p\-k\-no\-nu/, '=s1600')
                             .replace(/\/s[0-9]+(\-c)?\//, '\/s1600\/')
                             .replace(/=w[0-9]+\-h[0-9]+\-c/, '=s1600');
        }

var activeClass = (i === 0) ? 'active' : '';
        sliderHtml += '<div class="custom-slide ' + activeClass + '">' +
                        '<img src="' + thumbUrl + '" alt="' + title + '"/>' +
                        '<div class="custom-slide-badge">' + labelOtomatis + '</div>' +
                        '<div class="custom-slide-content">' +
                          '<h2 class="custom-slide-title"><a href="' + postUrl + '">' + title + '</a></h2>' +
                          '<div class="custom-slide-meta">BY ' + author + ' · ' + formattedDate + '</div>' +
                        '</div>' +
                      '</div>';
      }

wrapper.innerHTML = sliderHtml;
      slides = document.querySelectorAll('.custom-slide');
      clearInterval(slideInterval);
      slideInterval = setInterval(nextSlide, 5000);
    }

function showSlide(n) {
      if (slides.length === 0) return;
      slides[currentSlide].classList.remove('active');
      currentSlide = (n + slides.length) % slides.length;
      slides[currentSlide].classList.add('active');
    }

function nextSlide() { showSlide(currentSlide + 1); }
    function prevSlide() { showSlide(currentSlide - 1); }

// Memanggil umpan balik postingan utama blog tanpa memfilter label tertentu
    document.addEventListener("DOMContentLoaded", function() {
      var blogUrl = window.location.protocol + "//" + window.location.hostname;
      var scriptElement = document.createElement('script');
      scriptElement.src = blogUrl + '/feeds/posts/default?alt=json-in-script&callback=panggilSliderBlogger&max-results=' + jumlahPost;
      scriptElement.type = 'text/javascript';
      document.body.appendChild(scriptElement);
    });
    // ]]>
  </script>
</b:if>

KETERANGAN PERUBAHAN KODE

Ganti dan rubah kode: var jumlahPost = 15; // Jumlah slide berita terbaru yang ingin ditampilkan otomatis
Ganti dan rubah kode: <button class='custom-slider-btn next-btn' onclick='nextSlide()'>&#10095;</button>
<button class='custom-slider-btn prev-btn' onclick='prevSlide()'>&#10094;</button> // Warna Tombol Navigasi Slider sesuai yang diinginkan
Apabila teman teman ingin menampilkan Slider ini juga muncul di artikel blogger teman teman, hapus saja kode <b:if cond='data:view.isHomepage'> dan kode </b:if> di akhir kode script
Simpan EDIT HTML Template

Mudah bukan sobat blogger yang penerapannya, ya iyalah tinggal tempel..upss, yang penting bisa memberikan yang terbaik untuk mempercantik dan memperganteng blog sobat semua saya sudah senang😆😀 Jagan lupa apabila ada pertanyaan silahkan kasih komentar dibawah ya.. Sekian dulu artikel saya kali ini semoga bermanfaat untuk teman teman blogger semua, Salam Ngerapik Blog!

Tutorial Membuat Slider Berita Sesuai Label Otomatis Blogspot Ala Ngerapik Blog

Posting Komentar

Formulir Kontak