Tutorial Blogger Cara Membuat Widget TAB Rekomendasi Ala Saungjiwa Blog

Tutorial Blog: Tutorial Blogger Cara Membuat Widget TAB Rekomendasi Ala Saungjiwa Blog

Salam Saungjiwa blog, hari ini panas cuacanya gak karuan teman teman. Musim kemarau kali ini sudah menimpiskan air di daerah kami di pangkalpinang. Sudah hampir 8 bulan gak turun hujan disini sobat blogger, bagaimana dengan daerah teman teman blogger semua apakah sudah hujan atau masih juga kemarau? Komen dibawah ya untuk berbagi informasinya..😅

Pada ulasan artikel kali ini saya mencoba melanjutkan menulis artikel tentang Cara Membuat Widget TAB Rekomendasi Ala Saungjiwa Blog. Melanjutkan artikel saya disini. Pada dasarnya widget Tab Rekomedasi ini terdiri dari tiga menu yang tergabung menjadi satu badan dalam satu tampilan widget, yaitu menu dari Popular Post, Menu Sosial Media, dan terakhir Menu Komentar Pengunjung. pada menu komentar pengujung, disini saya tidak menampilkan komentar admin dan hanya fokus menampilkan komentar pengunjung saja sobat blogger.

Pada Menu Popular Post widget ini otomatis akan menampilkan postingan-postingan yang terpopular dan terbaru dari Blog kita tentunya, dengan jumlah tampilan yang telah disesuaikan. Kelihatan tambah bagus lagi karena widget ini bergerak dan berputar saat diarahkan mouse. Disini saya menampilkan 5 artikel terpopular yang akan tempil ya sobat blogger, sobat nanti bisa merubahnya kok manual dengan melihat cara penapliksiannya dibawah ini.

Untuk hasil tampilannya seperti gambar dibawah ini:

Untuk sobat blogger yang mau mengaplikasikannya, langsung saja berikut adalah cara-caranya:

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut ini.

<style type="text/css"> .tab-content.active { display: block; animation: fadeIn 0.4s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .tab-container { margin: 15px 0; font-family: 'Segoe UI', Arial, sans-serif; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); overflow: hidden; } .tab-buttons { display: flex; background: #f7f9fa; border-bottom: 1px solid #e0e0e0; } .tab-btn { flex: 1; padding: 12px 10px; font-size: 13px; font-weight: 600; color: #666; background: none; border: none; cursor: pointer; outline: none; text-align: center; transition: all 0.3s ease; } .tab-btn:hover { background: #f0f2f5; color: #333; } .tab-btn.active { background: #ffffff; color: #0073ff; border-bottom: 2px solid #0073ff; } .tab-content { display: none; padding: 15px; max-height: 420px; overflow-y: auto; } .tab-list { list-style: none; padding: 0; margin: 0; } .tab-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #eee; font-size: 13px; line-height: 1.4; } .tab-list li:last-child { border-bottom: none; } .thumb-round { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid #e0e0e0; transition: transform 0.6s ease-in-out; flex-shrink: 0; } .tab-list li:hover .thumb-round { transform: rotate(360deg); border-color: #0073ff; } .tab-list a { color: #333; text-decoration: none; font-weight: 500; transition: color 0.2s; } .tab-list a:hover { color: #0073ff; } .comment-item { display: flex; align-items: flex-start; gap: 6px; } .blogger-emoji { font-size: 14px; flex-shrink: 0; margin-top: 1px; } .follow-box { text-align: center; padding: 10px 0; } .follow-btn { display: inline-block; background: #0073ff; color: #fff !important; padding: 10px 20px; font-weight: bold; border-radius: 20px; margin-bottom: 15px; box-shadow: 0 2px 4px rgba(0,115,255,0.3); text-decoration: none; } .social-icons-wrap { display: flex; justify-content: center; gap: 15px; margin-top: 15px; } .social-icon-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff !important; transition: transform 0.2s; } .social-icon-btn:hover { transform: scale(1.1); } .social-icon-btn svg { width: 18px; height: 18px; fill: #ffffff; } .fb-btn { background: #1877F2; } .ig-btn { background: #E1306C; } .x-btn { background: #000000; } </style> <div class="tab-container"> <div class="tab-buttons"> <button class="tab-btn active" onclick="switchTab(event, 'popular-tab')">🔥 Populer</button> <button class="tab-btn" onclick="switchTab(event, 'follow-tab')">👥 Pengikut</button> <button class="tab-btn" onclick="switchTab(event, 'comments-tab')">💬 Komentar</button> </div> <div id="popular-tab" class="tab-content active"> <ul id="popular-list" class="tab-list"><li>Memuat artikel...</li></ul> </div> <div id="follow-tab" class="tab-content"> <div class="follow-box"> <a class="follow-btn" href="https://www.blogger.com/followers/follow/6786013530695459380" target="_blank">Ikuti Blog Ini</a> <p style="font-size: 12px; color: #666; margin: 0;">Ikuti pembaruan kami:</p> <div class="social-icons-wrap"> <a class="social-icon-btn fb-btn" href="https://facebook.com/aulia.tiloeagusta" target="_blank"> <svg viewbox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></path></svg> </a> <a class="social-icon-btn ig-btn" href="https://www.instagram.com/rumahbelajar_saungjiwa" target="_blank"> <svg viewbox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></path></svg> </a> <a class="social-icon-btn x-btn" href="https://x.com/agustaaulia" target="_blank"> <svg viewbox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></path></svg> </a> </div> </div> </div> <div id="comments-tab" class="tab-content"> <ul id="comments-list" class="tab-list"><li>Memuat komentar...</li></ul> </div> </div> <script type="text/javascript"> function switchTab(evt, tabId) { var contents = document.querySelectorAll(".tab-content"); for (var i = 0; i < contents.length; i++) { contents[i].classList.remove("active"); } var buttons = document.querySelectorAll(".tab-btn"); for (var i = 0; i < buttons.length; i++) { buttons[i].classList.remove("active"); } document.getElementById(tabId).classList.add("active"); evt.currentTarget.classList.add("active"); } function getBloggerData(url, callbackName) { var script = document.createElement('script'); script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'alt=json-in-script&callback=' + callbackName; document.body.appendChild(script); } // Filter Nama Admin Khusus untuk Tab Artikel Populer function isAdminAccount(authorName, authorUri) { var name = authorName ? authorName.toLowerCase() : ""; var uri = authorUri ? authorUri.toLowerCase() : ""; if (name.indexOf("aulia") !== -1 || name.indexOf("agusta") !== -1 || name.indexOf("admin") !== -1 || name.indexOf("tiloe") !== -1 || uri.indexOf("profile/178") !== -1 || uri.indexOf("profile/067") !== -1) { return true; } return false; } // 1. ENGINE TAB ARTIKEL POPULER (TAMPILKAN 5) function parsePopularPosts(json) { var entries = json.feed.entry || []; var html = ""; var count = 0; for (var i = 0; i < entries.length; i++) { if (count >= 5) break; var entry = entries[i]; var authorName = entry.author && entry.author && entry.author.name ? entry.author.name['$t'] : ""; var authorUri = entry.author && entry.author && entry.author.uri ? entry.author.uri['$t'] : ""; if (isAdminAccount(authorName, authorUri)) { continue; } var title = entry.title['$t']; var href = ""; if (entry.link) { for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel === "alternate") { href = entry.link[j].href; break; } } } var thumbUrl = "https://placehold.co"; if (entry.media$thumbnail) { thumbUrl = entry.media$thumbnail.url.replace(/\/s72\-c/, "/s150-c"); } html += "<li><img class='thumb-round' src='" + thumbUrl + "' alt='" + title + "'/><a href='" + href + "'>" + title + "</a></li>"; count++; } document.getElementById("popular-list").innerHTML = html || "<li>Tidak ada artikel dari pengunjung.</li>"; } // 2. ENGINE TAB KOMENTAR (MODE WHITELIST: DIJAMIN MUNCUL 5 ITEM) function parseRecentComments(json) { var entries = json.feed.entry || []; var htmlComments = ""; var count = 0; for (var i = 0; i < entries.length; i++) { if (count >= 5) break; var entry = entries[i]; var authorName = "Anonymous"; var authorUri = ""; if (entry.author && entry.author) { authorName = entry.author.name ? entry.author.name['$t'] : "Anonymous"; authorUri = entry.author.uri ? entry.author.uri['$t'] : ""; } var commentTitleText = entry.title && entry.title['$t'] ? entry.title['$t'] : ""; // Validasi data rusak bawaan sistem if (!commentTitleText || commentTitleText.trim() === "" || authorName.trim() === "") { continue; } var cleanComment = commentTitleText.replace("Komentar pada artikel ini", "").replace("Comment on", ""); if (cleanComment.trim() === "" || cleanComment.indexOf("telah dihapus") !== -1) { continue; } // STRATEGI WHITELIST: Jika nama terdeteksi sebagai Admin, ubah menjadi label interaktif var displaySender = authorName; if (isAdminAccount(authorName, authorUri)) { displaySender = "Diskusi Sahabat Blogger"; } if (cleanComment.length > 55) { cleanComment = cleanComment.substring(0, 55) + "..."; } var commentHref = ""; if (entry.link) { for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel === "alternate") { commentHref = entry.link[j].href; break; } } } htmlComments += "<li class='comment-item'><span class='blogger-emoji'>💬</span><div><strong>" + displaySender + ":</strong> <a href='" + commentHref + "'>" + cleanComment + "</a></div></li>"; count++; } // Jika kuota tetap kurang dari 5 karena feed kosong, berikan fallback teks ramah document.getElementById("comments-list").innerHTML = htmlComments || "<li>Belum ada aktivitas diskusi komentar terbaru.</li>"; } // Menyeimbangkan query feed agar aman dari limit pembatasan data Google Blogger document.addEventListener("DOMContentLoaded", function() { getBloggerData("/feeds/posts/default?max-results=40", "parsePopularPosts"); getBloggerData("/feeds/comments/default?max-results=40", "parseRecentComments"); }); </script>

• Sebaiknya kode di tempel dulu di notepad++ biar gak ribet merubahnay sebelum ditempel di Gadget Tata Letak Blog.

#Keterangan Kode:

 

1. Ganti dan rubah kode yang berwarna Ungu dibawah ini, sesuai URL media Sosial sobat blogger semua:

<div id="follow-tab" class="tab-content">

    <div class="follow-box">

      <a class="follow-btn" href="https://www.blogger.com/followers/follow/6786013530695459380" target="_blank">Ikuti Blog Ini</a>

      <p style="font-size: 12px; color: #666; margin: 0;">Ikuti pembaruan kami:</p>

      <div class="social-icons-wrap">

        <a class="social-icon-btn fb-btn" href="https://facebook.com/aulia.tiloeagusta" target="_blank">

          <svg viewbox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></path></svg>

        </a>

        <a class="social-icon-btn ig-btn" href="https://www.instagram.com/rumahbelajar_saungjiwa" target="_blank">

          <svg viewbox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></path></svg>

        </a>

        <a class="social-icon-btn x-btn" href="https://x.com/agustaaulia" target="_blank">

          <svg viewbox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></path></svg>

        </a>

      </div>

    </div>

  </div>

2. Ganti dan rubah kode yang berwarna Hijau dibawah ini, sesuai angka popular post yang sobat blogger ingin tampilkan:

// 1. ENGINE TAB ARTIKEL POPULER (TAMPILKAN 5)

function parsePopularPosts(json) {

  var entries = json.feed.entry || []; var html = ""; var count = 0;

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

    if (count >= 5) break;

    var entry = entries[i];

    var authorName = entry.author && entry.author && entry.author.name ? entry.author.name['$t'] : "";

    var authorUri = entry.author && entry.author && entry.author.uri ? entry.author.uri['$t'] : "";

3. Ganti dan rubah kode yang berwarna Biru dibawah ini, sesuai angka komentar pengunjung yang sobat blogger ingin tampilkan:

/ 2. ENGINE TAB KOMENTAR (MODE WHITELIST: DIJAMIN MUNCUL 5 ITEM)

function parseRecentComments(json) {

  var entries = json.feed.entry || []; var htmlComments = ""; var count = 0;

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

    if (count >= 5) break; 

    var entry = entries[i]; 

6.  Terakhir klik Simpan, selesai.

Demikianlah artikel saya keli ini tentang "Tutorial Blogger Cara Membuat Widget TAB Rekomendasi Ala Saungjiwa Blog" Semoga dapat diambil manfaatnya untuk para pengguna blogger semuanya. Akhir kata saya ucapkan terimakasih telah berkunjung ke Saungjiwa Blog ini, semoga teman teman semua dapat berkreasi dengan tutorial yang saya tampilkan. 🙏 

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...