Feed Bergaya Instagram

/* Instagram Grid Style */
.insta-feed-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolom seperti IG */
    gap: 10px;
    margin: 20px 0;
    width: 100%;
}
.insta-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eee;
    border-radius: 4px;
}
.insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
}
.insta-item:hover img {
    opacity: 0.8;
    transform: scale(1.05);
}
/* Responsive untuk HP */
@media (max-width: 480px) {
    .insta-feed-container { gap: 5px; }
}

<div id="dynamic-insta-feed"></div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // 1. Identifikasi Label Postingan
    // Blogger menyimpan label di variabel global atau meta tags
    var labels = [];
    var labelLinks = document.querySelectorAll('.post-labels a');
    labelLinks.forEach(function(el) {
        labels.push(el.textContent.trim());
    });

    // Gunakan label pertama sebagai filter, jika tidak ada pakai 'all'
    var targetLabel = labels.length > 0 ? labels[0] : '';
    var feedUrl = "/feeds/posts/default/-/" + targetLabel + "?alt=json&max-results=6";

    // 2. Ambil Data dari API Blogger
    fetch(feedUrl)
    .then(res => res.json())
    .then(data => {
        var entries = data.feed.entry || [];
        var html = '<div class="insta-feed-container">';
        
        entries.forEach(entry => {
            var title = entry.title.$t;
            var link = entry.link.find(l => l.rel === 'alternate').href;
            // Mengambil gambar resolusi tinggi
            var img = entry.media$thumbnail ? entry.media$thumbnail.url.replace('s72-c', 's600-c') : 'https://via.placeholder.com/600';
            
            html += `<a href="${link}" class="insta-item" title="${title}">
                        <img src="${img}" alt="${title}" loading="lazy"/>
                     </a>`;
        });
        html += '</div>';

        // 3. Injeksi Otomatis ke Tengah Postingan
        var postBody = document.querySelector('.post-body');
        if (postBody) {
            var paragraphs = postBody.querySelectorAll('p, br');
            var middle = Math.floor(paragraphs.length / 2);
            
            if (paragraphs.length > 3) {
                // Masukkan di paragraf tengah
                paragraphs[middle].after(document.createRange().createContextualFragment(html));
            } else {
                // Jika postingan pendek, taruh di bawah
                postBody.appendChild(document.createRange().createContextualFragment(html));
            }
        }
    });
});
</script>

<div id="insta-feed-wrapper" style="position:relative; margin:20px 0;">
  <button id="prevBtn" class="nav-arrow" onclick="scrollFeed(-200)">&#10094;</button>
  <div id="insta-feed-container" class="insta-feed-container"></div>
  <button id="nextBtn" class="nav-arrow" onclick="scrollFeed(200)">&#10095;</button>
</div>

<style>
  /* Container Utama */
  .insta-feed-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth; /* Gerakan geser halus */
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 10px 5px;
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch;
  }
  
  .insta-feed-container::-webkit-scrollbar { display: none; }

  /* Item Lingkaran */
  .insta-item-wrapper {
    flex: 0 0 auto;
    width: 90px;
    text-align: center;
    scroll-snap-align: start;
  }

  .insta-item {
    position: relative;
    width: 75px;
    height: 75px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #e1306c;
    padding: 2px;
    background: #fff;
    cursor: pointer;
    margin: 0 auto;
  }

  .insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  /* Style Panah Navigasi */
  .nav-arrow {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;
    transition: all 0.2s;
  }

  .nav-arrow:hover { background: #fff; scale: 1.1; }
  #prevBtn { left: -10px; }
  #nextBtn { right: -10px; }

  /* Sembunyikan panah di layar sentuh (HP) jika ingin lebih clean */
  @media (max-width: 768px) {
    .nav-arrow { display: none; }
  }

  /* Animasi Hati */
  .heart-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 30px;
    pointer-events: none;
  }
  .animate-heart { animation: heartFade 0.8s ease-out; }
  @keyframes heartFade {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
  }

  .insta-title {
    font-size: 10px;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #262626;
    font-family: sans-serif;
  }
</style>

<script>
// Fungsi Geser Manual
function scrollFeed(distance) {
    const container = document.getElementById('insta-feed-container');
    container.scrollBy({ left: distance, behavior: 'smooth' });
}

(function() {
    document.addEventListener("DOMContentLoaded", function() {
        const postBody = document.querySelector('.post-body, .entry-content, .post-content, #post-body');
        if (!postBody) return;

        let labels = [];
        document.querySelectorAll('a[href*="/search/label/"]').forEach(link => {
            let txt = link.textContent.trim();
            if (txt && !labels.includes(txt)) labels.push(txt);
        });

        let filter = labels.length > 0 ? encodeURIComponent(labels[0]) : "";
        let feedUrl = `/feeds/posts/default${filter ? '/-/' + filter : ''}?alt=json&max-results=12`;

        fetch(feedUrl)
        .then(res => res.json())
        .then(data => {
            const entries = data.feed.entry || [];
            if (entries.length === 0) return;

            let html = '';
            entries.forEach(entry => {
                let title = entry.title.$t;
                let link = entry.link.find(l => l.rel === 'alternate').href;
                let img = entry.media$thumbnail ? entry.media$thumbnail.url.replace('s72-c', 's200-c') : 'https://via.placeholder.com/200';
                
                html += `
                    <div class="insta-item-wrapper">
                      <div class="insta-item" onclick="showHeart(this, '${link}')">
                          <img src="${img}" alt="${title}" loading="lazy">
                          <span class="heart-icon">❤️</span>
                      </div>
                      <div class="insta-title">${title}</div>
                    </div>`;
            });
            
            const container = document.getElementById('insta-feed-container');
            const wrapper = document.getElementById('insta-feed-wrapper');
            container.innerHTML = html;

            // Injeksi wrapper ke tengah postingan
            const paragraphs = postBody.querySelectorAll('p');
            if (paragraphs.length >= 3) {
                paragraphs[Math.floor(paragraphs.length / 2)].insertAdjacentHTML('afterend', wrapper.outerHTML);
            } else {
                postBody.appendChild(wrapper);
            }
            // Hapus element asli yang di luar post agar tidak double
            wrapper.remove(); 
        });
    });
})();

function showHeart(el, url) {
    const heart = el.querySelector('.heart-icon');
    heart.classList.add('animate-heart');
    setTimeout(() => { window.location.href = url; }, 700);
}
</script>