Cara Membuat Halaman Member/Penulis Otomatis di Blogger (SEO, Responsif, & Canggih)

Warkasa1919
Warkasa1919
Konten Premium - Warkasa1919
Cara Membuat Halaman Member/Penulis Otomatis di Blogger (SEO, Responsif, & Canggih)

Konten Premium

Warkasa1919.com menyediakan konten premium & berbayar yang terdiri dari berbagai topik teknologi,inspiratif,cerita kehidupan dan fiksi.

| kamu baca


Apakah kamu ingin menampilkan daftar penulis atau kontributor di Blogger secara otomatis? 
Dengan cara ini, setiap penulis di blog kamu akan muncul lengkap dengan foto profil, jumlah artikel yang ditulis, hingga artikel terbaru tanpa perlu input manual.

Tutorial ini cocok digunakan di blog Blogger lainnya yang ingin tampil lebih profesional.

Kelebihan Halaman Member Otomatis di Blogger

  • SEO Friendly: menggunakan struktur data schema.org (Person).

  • Otomatis: data penulis diambil langsung dari feed Blogger (/feeds/posts/default).

  • Jumlah Artikel: menampilkan berapa banyak artikel yang ditulis setiap penulis.

  • Artikel Terbaru: bisa menampilkan 3 artikel terakhir dari tiap penulis.

  • Desain Responsif: tampil rapi di semua perangkat (HP, tablet, laptop).

  • Ringan & Canggih: menggunakan lazyload untuk mempercepat loading gambar.

Langkah Membuat Halaman Penulis Otomatis di Blogger

1. Masuk ke Blogger

  • Login ke akun Blogger kamu.

  • Pilih blog yang ingin kamu tambahkan halaman penulis.

2. Buat Halaman Baru

  • Masuk ke menu Halaman > Halaman Baru.

  • Pilih mode HTML (bukan Compose).

3. Tempelkan Kode Halaman Penulis

Versi Penulis Otomatis di Blogger

Salin kode berikut, lalu tempelkan di halaman Blogger:

<!-- 🌟 Halaman Penulis Otomatis Blogger -->
<div class="author-page">
  <h1 class="author-title">Daftar Penulis</h1>
  <p class="author-desc">
    Berikut adalah daftar kontributor aktif yang menulis di blog ini, lengkap dengan profil, jumlah artikel, dan artikel terbaru.
  </p>
  <div id="author-list" class="author-list"></div>
</div>

<!-- ✅ CSS -->
<style>
.author-page {text-align:center;padding:30px;background:#f9fafb;}
.author-title {font-size:2rem;font-weight:700;margin-bottom:10px;color:#111;}
.author-desc {max-width:700px;margin:0 auto 30px;color:#444;}
.author-list {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
.author-card {background:#fff;padding:20px;border-radius:20px;box-shadow:0 5px 15px rgba(0,0,0,0.1);transition:.3s ease;text-align:center;}
.author-card:hover {transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,0.15);}
.author-img {width:120px;height:120px;object-fit:cover;border-radius:50%;margin-bottom:15px;transition:0.3s;}
.author-card:hover .author-img {transform:scale(1.05);}
.author-name {font-size:1.1rem;font-weight:600;color:#111;margin:10px 0;}
.author-meta {font-size:0.85rem;color:#777;margin-bottom:10px;}
.author-bio {font-size:0.9rem;color:#555;line-height:1.5;margin-bottom:15px;}
.author-social a {margin:0 5px;color:#555;font-size:1.2rem;transition:0.3s;}
.author-social a:hover {color:#0073e6;}
.author-posts {margin-top:15px;text-align:left;}
.author-posts h3 {font-size:1rem;margin-bottom:8px;color:#111;}
.author-posts ul {list-style:none;padding:0;margin:0;}
.author-posts li {margin-bottom:5px;}
.author-posts a {text-decoration:none;color:#0073e6;font-size:0.9rem;}
.author-posts a:hover {text-decoration:underline;}
/* Lazyload efek */
.lazyload {opacity:0;transition:opacity .5s ease;}
.lazyloaded {opacity:1;}
</style>

<!-- ✅ Script Penulis Otomatis -->
<script>
document.addEventListener("DOMContentLoaded",function(){
  fetch("/feeds/posts/default?alt=json&max-results=500")
  .then(res=>res.json())
  .then(data=>{
    let authors = {};
    let entries = data.feed.entry;

    // Ambil data penulis + artikel
    entries.forEach(entry=>{
      let author = entry.author[0];
      let name = author.name.$t;
      let photo = author.gd$image ? author.gd$image.src : "https://via.placeholder.com/250x250.png?text=Penulis";
      let url = author.uri ? author.uri.$t : "#";
      let postTitle = entry.title.$t;
      let postUrl = entry.link.find(l=>l.rel==="alternate").href;

      if(!authors[name]) {
        authors[name] = {name:name,photo:photo,url:url,count:0,posts:[]};
      }
      authors[name].count++;
      if(authors[name].posts.length<3){
        authors[name].posts.push({title:postTitle,url:postUrl});
      }
    });

    let container=document.getElementById("author-list");
    Object.values(authors).forEach(a=>{
      let card=document.createElement("div");
      card.className="author-card";

      // Artikel terbaru
      let postsHTML = "";
      if(a.posts.length>0){
        postsHTML = `<div class="author-posts"><h3>Artikel Terbaru:</h3><ul>`;
        a.posts.forEach(p=>{
          postsHTML += `<li><a href="${p.url}" target="_blank">${p.title}</a></li>`;
        });
        postsHTML += `</ul></div>`;
      }

      card.innerHTML=`
        <img data-src="${a.photo}" class="lazyload author-img" alt="${a.name}">
        <h2 class="author-name">${a.name}</h2>
        <p class="author-meta">${a.count} artikel dipublikasikan</p>
        <p class="author-bio">Klik profil untuk membaca semua artikel dari <strong>${a.name}</strong>.</p>
        <a href="${a.url}" target="_blank" rel="nofollow noopener" class="author-link">Lihat Profil</a>
        ${postsHTML}
      `;
      container.appendChild(card);
    });

    // Lazyload gambar
    const imgs=document.querySelectorAll("img.lazyload");
    const loadImg=(img)=>{img.src=img.dataset.src;img.onload=()=>img.classList.add("lazyloaded");};
    const observer=new IntersectionObserver((entries,obs)=>{
      entries.forEach(entry=>{
        if(entry.isIntersecting){loadImg(entry.target);obs.unobserve(entry.target);}
      });
    });
    imgs.forEach(img=>observer.observe(img));
  });
});
</script>

<!-- ✅ FontAwesome CDN -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/></noscript>

4. Simpan & Publikasikan

  • Klik Simpan / Publikasikan halaman.

  • Buka URL halaman, maka daftar penulis akan muncul otomatis.

Hasilnya

  • Tampil nama, foto, dan jumlah artikel setiap penulis.

  • Muncul 3 artikel terbaru dari masing-masing penulis.

  • Desain SEO, modern, responsif, dan ringan.


    • Contoh Halaman Member/Penulis Di Blogger


Tips Tambahan

  • Jika ingin menambahkan sosial media penulis, tambahkan manual di dalam script (cukup copy-paste author-social).

  • Bisa dikembangkan dengan fitur search bar penulis agar lebih interaktif.

  • Cocok untuk blog multi-author atau tim redaksi.

Bagikan artikel ini jika bermanfaat, dan jangan lupa baca artikel menarik lainnya di Warkasa1919.com.

📢 Dukung Warkasa1919 dengan membagikan artikel ini ke temanmu! Temukan juga turorial lainnya.

Bagian ini terkunci. Masukkan password untuk mendapatkan kode menarik lainnya.

Diposting oleh:
Warkasa1919
Warkasa1919
Untuk segala sesuatu ada Masanya, untuk apapun di bawah Langit ada Waktunya.
Jasa Pembuatan Website 1919
Rp 3.410.445
WordPress
Jasa Pembuatan Blog
Rp 1.878.293
Blogger
Konten Premium
Rp.25,000,00
Berlangganan Konten Premium Rp.25.000,00 sekali baca atau Rp.120.000,00 per tahun
Toko Buku Onlie
Rp.110.000,00
Buku
Property di Pekanbaru, Riau
Rp.-
Jika Anda berminat bisa menghubungi kami
Jasa Pembuatan Peta dan Pemetaan yang 1919 Mapping
Rp.-
Jika Anda berminat bisa menghubungi kami
Web Hosting
Cek Harga Domain
Domainesia

Lihat Peta

BHUMI ATR/BPN
atrbpn
Peta Interaktif SIGAP Kementerian LHK
SIGAP Kementerian LHK
OpenStreetMap
OpenStreetMap
Portal Geohidrometeorologi
Pusat Database BMKG
Google Maps
Google

Tanya AI

Gemini AI
Google
ChatGPT
ChatGPT
Meta AI
Meta

]]>
💖 Donasi