Tutorial membuat Rekomendasi Artikel lengkap dengan Profile Gambar, Jam Digital dan Jumlah Komentar Blogger

Salam blogger teman teman, apa kabar hari ini masih semangat ngeblogkah..? kalau saya lagi sibuk sibuknya mempercantik dan memperganteng Template Blog Ngerapik yang baru ini. Tadi saya menerapkan dan mengaplikasikan kode HTML untuk Rekomendasi Artikel yang tampil dibawah posingan artikel blog saya seperti tampak pada gambar dibawah ini, sekali dua tiga saya share deh ke teman teman blogger semuanya untuk di apliaksikan juga ke blogger teman teman semua apabila berkenan. Langsung saja cara penerapannya di blog, cekidot wae..

PENERAPAN KODE HTML

Untuk merapkan kode ini silahkan teman teman buka Edit Html Template blog, lalu cari tempat sesuai dengan posisi dan letak yang diinginkan misalnya di atas kode </body> atau di letak lainnya. Setelah menemukan letak yang pas silahkan copas kode html dibawah ini, saya bagi menjadi 2 Kotak ya teman teman biar tidak berantakan. Cara menerapkannya kode KOTAK 1 duluan lalu kode KOTAK 2 tepat berada dibawah kode KOTAK 1.

Kode KOTAK Pertama:

</> Kotak 1

<div class='rekomendit-widget'>
  
  <div class='rekomendit-header'>
    <div class='rekomendit-brand'>
      
      <div id='rekoAuthorProfile'></div>
      <span class='reko-time-separator'>•</span>
      
      <span class='reko-post-time' id='rekoWidgetDateTime'>Memuat waktu...</span>
    </div>
    <div class='rekomendit-sub-bar'>
      <div class='rekomendit-sub-title'>
        <strong>Rekomendasi Artikel</strong><br/>Ngerapik Blog Pangkalpinang
      </div>
      <a class='rekomendit-btn-more' href='#'>
  
  <svg class='reko-btn-icon' viewBox='0 0 24 24' style='width:15px; height:15px; fill:#ffffff; margin-right:6px; display:inline-block; vertical-align:middle;'>
    <path d='M21 5c-1.11-.64-2.58-1-4-1-2.52 0-5.25.92-7 2.5C8.25 4.92 5.52 4 3 4c-1.42 0-2.89.36-4 1v14c1.11-.64 2.58-1 4-1 2.52 0 5.25.92 7 2.5 1.75-1.58 4.48-2.5 7-2.5 1.42 0 2.89.36 4 1V5zm-2 12c-1.17-.38-2.54-.5-4-.5-2.31 0-4.71.64-6 1.5V7c1.29-.86 3.69-1.5 6-1.5 1.46 0 2.83.12 4 .5v11z'/>
  </svg>Selengkapnya
</a>

</div>
  </div>

<div class='rekomendit-slider-container'>
    <button class='rekomendit-arrow arrow-left' id='rekoPrevBtn' aria-label='Previous'>❮</button>
    
    
    <div class='rekomendit-track' id='rekomenditTrack'>
      <div class='reko-loading-text'>Memuat rekomendasi artikel...</div>
    </div>

<style>
.rekomendit-widget {
  background-color: #f5f5f5;
  border-radius: 16px;
  padding: 20px;
  max-width: 650px;
  margin: 20px auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  box-sizing: border-box;
}
.rekomendit-header {
  margin-bottom: 15px;
}
.rekomendit-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
#rekoAuthorProfile a {
  display: block;
  line-height: 0;
}
.reko-author-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ccc;
  display: block;
}
.reko-time-separator {
  color: #888;
}
.reko-post-time {
  font-size: 14px;
  color: #666666;
  font-weight: normal;
}
.rekomendit-sub-bar {
  background-color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #eaeaea;
}
.rekomendit-sub-title {
  color: #222222;
  font-size: 14px;
  line-height: 1.3;
}
.rekomendit-btn-more {
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 14px;
  border-radius: 6px;
}
.rekomendit-slider-container {
  position: relative;
  display: flex;
  align-items: center;
}
.rekomendit-track {
  display: flex;
  gap: 12px;
  overflow: hidden;
  scroll-behavior: smooth;
  width: 100%;
  padding: 4px 0;
}
.reko-loading-text {
  width: 100%;
  text-align: center;
  padding: 30px 0;
  color: #777;
  font-size: 14px;
  font-style: italic;
}
.rekomendit-item {
  width: calc((100% - 24px) / 3);
  flex-shrink: 0;
}
@media screen and (max-width: 480px) {
  .rekomendit-item {
    width: calc((100% - 12px) / 2);
  }
}
.rekomendit-item a {
  text-decoration: none;
  display: block;
}
.reko-img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background-color: #e0e0e0;
}
.reko-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reko-category {
  color: #e67e22;
  font-size: 12px;
  font-weight: bold;
  margin: 8px 0 4px 0;
  text-transform: uppercase;
}
.reko-title {
  color: #222222;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.reko-comment-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 12px;
  color: #1a73e8;
  font-weight: bold;
  margin-top: 4px;
}
.reko-comment-icon {
  width: 14px;
  height: 14px;
  fill: #1a73e8;
}
.rekomendit-arrow {
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  background-color: rgba(120, 120, 120, 0.7);
  color: #ffffff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.rekomendit-arrow:hover {
  background-color: rgba(50, 50, 50, 0.9);
}
.arrow-left { left: -12px; }
.arrow-right { right: -12px; }
.rekomendit-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 15px;
}
.reko-dot {
  width: 8px;
  height: 8px;
  background-color: #cccccc;
  border-radius: 50%;
  transition: background 0.2s;
  cursor: pointer;
}
.reko-dot.active-dot {
  background-color: #e67e22;
}
</style>

Kode KOTAK Kedua:

</> Kotak 2

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
    // === KONFIGURASI 2 LABEL UTAMA ANDA ===
    var labelUtama = "Template";       
    var labelKedua = "tutorial";    
    var limitPerLabel = 5;

var gambarCadangan = "https://googleusercontent.com";
    var avatarCadangan = "https://googleusercontent.com";

var track = document.getElementById('rekomenditTrack');
    var prevBtn = document.getElementById('rekoPrevBtn');
    var nextBtn = document.getElementById('rekoNextBtn');
    var dotsContainer = document.getElementById('rekomenditDots');
    
    if (!track) return;

// === SISTEM LIVE JAM DIGITAL + HARI & TANGGAL ===
    function jalankanWaktuLive() {
        var skrg = new Date();
        var daftarHari = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
        var daftarBulan = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
        
        var hari = daftarHari[skrg.getDay()];
        var tgl = skrg.getDate();
        var bulan = daftarBulan[skrg.getMonth()];
        var tahun = skrg.getFullYear();
        
        var jam = String(skrg.getHours()).padStart(2, '0');
        var menit = String(skrg.getMinutes()).padStart(2, '0');
        var detik = String(skrg.getSeconds()).padStart(2, '0');
        
        var elWaktu = document.getElementById('rekoWidgetDateTime');
        if (elWaktu) {
            elWaktu.innerText = hari + ", " + tgl + " " + bulan + " " + tahun + " • " + jam + "." + menit + "." + detik;
        }
    }
    jalankanWaktuLive();
    setInterval(jalankanWaktuLive, 1000);

// === FETCH DATA FEED AUTOMATION ===
    var urlFeed1 = '/feeds/posts/default/-/' + encodeURIComponent(labelUtama) + '?alt=json&max-results=' + limitPerLabel;
    var urlFeed2 = '/feeds/posts/default/-/' + encodeURIComponent(labelKedua) + '?alt=json&max-results=' + limitPerLabel;

var indexSekarang = 0;
    var totalHalaman = 1;
    var semuaArtikel = [];

Promise.all([
        fetch(urlFeed1).then(res => res.json()).catch(() => null),
        fetch(urlFeed2).then(res => res.json()).catch(() => null)
    ]).then(results => {
        
        // AUTO PROFILE TRACKER DARI SERVER BLOGGER
        var dataPertama = results[0] || results[1];
        if (dataPertama && dataPertama.feed && dataPertama.feed.entry && dataPertama.feed.entry.length > 0) {
            var authorData = dataPertama.feed.entry[0].author[0];
            var authorLink = authorData.uri ? authorData.uri.$t : "#";
            var authorAvatar = (authorData.gd$image && authorData.gd$image.src && !authorData.gd$image.src.includes('blank.gif')) ? authorData.gd$image.src : avatarCadangan;
            
            // Mengubah resolusi avatar blogger agar lebih tajam dan pas di box bulat
            if (authorAvatar.includes('s512-c')) {
                authorAvatar = authorAvatar.replace('s512-c', 's32-c');
            } else if (authorAvatar.includes('s1600')) {
                authorAvatar = authorAvatar.replace('s1600', 's32-c');
            }
            
            document.getElementById('rekoAuthorProfile').innerHTML = "<a href='" + authorLink + "'><img class='reko-author-img' src='" + authorAvatar + "' alt='Profile'/></a>";
        }

results.forEach((dataJson, indexLabel) => {
            var namaKategoriAktif = (indexLabel === 0) ? labelUtama : labelKedua;
            if (dataJson && dataJson.feed && dataJson.feed.entry) {
                var entries = dataJson.feed.entry;
                entries.forEach(entry => {
                    var judul = entry.title.$t;
                    var link = "#";
                    if (entry.link) {
                        for (var i = 0; i < entry.link.length; i++) {
                            if (entry.link[i].rel == 'alternate') {
                                link = entry.link[i].href;
                                break;
                            }
                        }
                    }
                    var jumlahKomentar = entry.thr$total ? entry.thr$total.$t : 0;
                    var imgUrl = gambarCadangan;
                    if (entry.media$thumbnail) {
                        imgUrl = entry.media$thumbnail.url.replace('/s72-c/', '/w480-rw/');
                    } else if (entry.content && entry.content.$t) {
                        var cocokImg = entry.content.$t.match(/<img[^>]+src="([^">]+)"/);
                        if (cocokImg) imgUrl = cocokImg[1];
                    }

if (!semuaArtikel.some(item => item.link === link)) {
                        semuaArtikel.push({ judul: judul, link: link, imgUrl: imgUrl, kategori: namaKategoriAktif, komentar: jumlahKomentar });
                    }
                });
            }
        });

if (semuaArtikel.length > 0) {
            renderWidget(semuaArtikel);
        } else {
            track.innerHTML = "<div class='reko-loading-text'>Tidak menemukan artikel di label '" + labelUtama + "' maupun '" + labelKedua + "'.</div>";
        }
    });

function renderWidget(artikelList) {
        var htmlHasil = "";
        artikelList.forEach(item => {
            htmlHasil += "<div class='rekomendit-item'>" +
                "<a href='" + item.link + "'>" +
                  "<div class='reko-img-wrapper'>" +
                    "<img alt='" + item.judul + "' src='" + item.imgUrl + "'/>" +
                  "</div>" +
                  "<div class='reko-category'>" + item.kategori + "</div>" +
                  "<div class='reko-title'>" + item.judul + "</div>" +
                  "<div class='reko-comment-box'>" +
                    "<svg class='reko-comment-icon' viewBox='0 0 24 24'><path d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z'/></svg>" +
                    "<span>" + item.komentar + "</span>" +
                  "</div>" +
                "</a>" +
              "</div>";
        });
        track.innerHTML = htmlHasil;

var itemPerHalaman = window.innerWidth <= 480 ? 2 : 3;
        totalHalaman = Math.ceil(artikelList.length / itemPerHalaman);
        
        var dotsHtml = "";
        for (var d = 0; d < totalHalaman; d++) {
            dotsHtml += "<span class='reko-dot" + (d === 0 ? " active-dot" : "") + "' data-index='" + d + "'></span>";
        }
        if(dotsContainer) dotsContainer.innerHTML = dotsHtml;

document.querySelectorAll('.reko-dot').forEach(dot => {
            dot.addEventListener('click', function() {
                indexSekarang = parseInt(this.getAttribute('data-index'));
                updateSlider();
            });
        });

initSliderControls();
    }

function updateSlider() {
        var itemElement = track.querySelector('.rekomendit-item');
        if (!itemElement) return;
        var itemPerHalaman = window.innerWidth <= 480 ? 2 : 3;
        var lebarItem = itemElement.offsetWidth + 12; 
        track.scrollLeft = indexSekarang * lebarItem * itemPerHalaman;

document.querySelectorAll('.reko-dot').forEach((dot, idx) => {
            if (idx === indexSekarang) dot.classList.add('active-dot');
            else dot.classList.remove('active-dot');
        });
    }

PERUBAHAN KODE HTML

Silahkan ganti dan rubah kode dibawah ini dengan kesesuaian yang teman teman inginkan:

Ganti dan rubah kode <strong>Rekomendasi Artikel</strong><br/>Ngerapik Blog Pangkalpinang // dengan teks yang diinginkan.
Ganti dan rubah kode // === KONFIGURASI 2 LABEL UTAMA ANDA ===
var labelUtama = "Template";
var labelKedua = "tutorial";
var limitPerLabel = 5; // dengan kesesuaian label bogger sobat
Ganti dan rubah kode var gambarCadangan = "https://googleusercontent.com";
var avatarCadangan = "https://googleusercontent.com"; // dengan gambar URL avatar yang diinginkan apabila tidak muncul otomatis dari profile blogger.
SIMPAN Edit HTML Template

Nah, menarik bukan artikel kali ini tentang "Tutorial membuat Rekomendasi Artikel lengkap dengan Profile Gambar, Jam Digital dan Jumlah Komentar Blogger" semoga bermanfaat untuk teman teman blogger yang sudah berkunjung kesini. Ayoo kita menulis dan bagikan artikel kita, Salam Ngerapik Blog!

Tutorial membuat Rekomendasi Artikel lengkap dengan Profile Gambar, Jam Digital dan Jumlah Komentar Blogger

Posting Komentar

Formulir Kontak