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

Warkasa1919

November 06, 2025 September 26, 2025

Konten Premium Warkasa1919

Akses Lifetime • Script Eksklusif • Tutorial Langka • Fiksi

Premium Lifetime Access dengan fitur rutin update.

Cara Pembayaran

💎 Paket Premium — Rp125.000 (Akses Semua Artikel)
📘 Per Artikel — Rp25.000 (Satu artikel)

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.

Bagian premium terkunci 🔐
Masukkan password untuk melanjutkan.

✅ Premium unlocked!

Versi Yang Ada Fitur Kotak Pencarian (Search Bar)

Berikut ini adalah versi yang ada fitur kotak pencarian (search bar) untuk mencari penulis berdasarkan nama agar makin interaktif.

Kode ini sudah dilengkapi dengan struktur schema.org (SEO), desain modern responsif, lazyload gambar, tombol sosial media, dan animasi halus.

<!-- 🌟 Halaman Member/Penulis Warkasa1919.com -->
<div class="author-page" itemscope itemtype="https://schema.org/Person">
  <h1 class="author-title">Tim Penulis Warkasa1919</h1>
  <p class="author-desc">
    Kenali para penulis berbakat di <strong>Warkasa1919.com</strong> yang selalu menghadirkan artikel SEO, inspiratif, dan bermanfaat untuk pembaca setia.
  </p>

  <div class="author-list">
    <!-- ✅ Profil Penulis 1 -->
    <div class="author-card" itemprop="author" itemscope itemtype="https://schema.org/Person">
      <img data-src="https://via.placeholder.com/250x250.png?text=Penulis+1" class="lazyload author-img" alt="Penulis Warkasa1919" itemprop="image" />
      <h2 itemprop="name">Andi Saputra</h2>
      <p class="author-bio" itemprop="description">
        Penulis teknologi & SEO. Suka berbagi tips blogging, coding, dan optimasi mesin pencari.
      </p>
      <div class="author-social">
        <a href="https://facebook.com" target="_blank" rel="nofollow noopener" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
        <a href="https://twitter.com" target="_blank" rel="nofollow noopener" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
        <a href="https://linkedin.com" target="_blank" rel="nofollow noopener" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
      </div>
    </div>

    <!-- ✅ Profil Penulis 2 -->
    <div class="author-card" itemprop="author" itemscope itemtype="https://schema.org/Person">
      <img data-src="https://via.placeholder.com/250x250.png?text=Penulis+2" class="lazyload author-img" alt="Penulis Warkasa1919" itemprop="image" />
      <h2 itemprop="name">Siti Rahmawati</h2>
      <p class="author-bio" itemprop="description">
        Penulis kisah inspiratif, motivasi, dan lifestyle. Membawa semangat positif di setiap tulisannya.
      </p>
      <div class="author-social">
        <a href="https://instagram.com" target="_blank" rel="nofollow noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
        <a href="https://tiktok.com" target="_blank" rel="nofollow noopener" aria-label="Tiktok"><i class="fab fa-tiktok"></i></a>
        <a href="mailto:email@example.com" target="_blank" rel="nofollow noopener" aria-label="Email"><i class="fas fa-envelope"></i></a>
      </div>
    </div>
  </div>
</div>

<!-- ✅ CSS Styling -->
<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(250px,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;}
.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-bio {font-size:0.95rem;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;}
/* Lazyload efek */
.lazyload {opacity:0;transition:opacity .5s ease;}
.lazyloaded {opacity:1;}
</style>

<!-- ✅ Script LazyLoad Gambar -->
<script>
document.addEventListener("DOMContentLoaded",function(){
  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>

Fitur yang sudah ada:

SEO schema.org (Person untuk profil penulis).
Desain responsif dengan CSS Grid.
Lazyload gambar supaya blog tetap cepat.
Animasi hover modern.
Ikon sosial media.
Mobile-friendly.

Versi Otomatis Halaman Member/Penulis Di Blogger

Berikut ini adalah versi otomatis halaman Member/Penulis di Blogger yang langsung menampilkan daftar penulis berdasarkan data penulis postingan (data:post.author). Jadi, setiap kali ada postingan baru, halaman ini akan otomatis menarik nama penulis, foto profil, dan link profilnya tanpa perlu input manual.

Kode Halaman Penulis Otomatis Blogger

Silakan buat halaman baru (Page) di Blogger, lalu pilih mode HTML dan tempelkan kode berikut:

<!-- 🌟 Halaman Penulis Otomatis Blogger Warkasa1919.com -->
<div class="author-page">
  <h1 class="author-title">Daftar Penulis Warkasa1919</h1>
  <p class="author-desc">
    Inilah para kontributor yang aktif menulis artikel bermanfaat, inspiratif, dan SEO di <strong>Warkasa1919.com</strong>.
  </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(250px,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;}
.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-bio {font-size:0.95rem;color:#555;line-height:1.5;margin-bottom:15px;}
.author-name {font-size:1.1rem;font-weight:600;color:#111;margin:10px 0;}
/* Lazyload efek */
.lazyload {opacity:0;transition:opacity .5s ease;}
.lazyloaded {opacity:1;}
</style>

<!-- ✅ Script Ambil Data Penulis -->
<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;
    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 : "#";
      if(!authors[name]) {
        authors[name] = {name:name,photo:photo,url:url};
      }
    });

    let container=document.getElementById("author-list");
    Object.values(authors).forEach(a=>{
      let card=document.createElement("div");
      card.className="author-card";
      card.innerHTML=`
        <img data-src="${a.photo}" class="lazyload author-img" alt="${a.name}">
        <h2 class="author-name">${a.name}</h2>
        <p class="author-bio">Klik profil untuk membaca artikel dari <strong>${a.name}</strong>.</p>
        <a href="${a.url}" target="_blank" rel="nofollow noopener" class="author-link">Lihat Profil</a>
      `;
      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 (optional untuk ikon sosial, jika mau tambahkan) -->
<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>

Cara Kerja:

Script ini akan menarik semua data penulis dari feed Blogger (/feeds/posts/default?alt=json).
Setiap nama penulis hanya muncul sekali, meskipun dia menulis banyak artikel.
Otomatis menampilkan foto profil Google/Blogger jika tersedia (fallback placeholder bila tidak ada).
Klik "Lihat Profil" langsung ke halaman profil Blogger penulis.

Versi Paling Lengkap Halaman Member/Penulis Di Blogger

Berikutnya adalah versi paling lengkap:

Menampilkan foto + nama penulis
Jumlah artikel yang ditulis
Tombol sosial media (manual bisa diatur)
3 artikel terbaru dari setiap penulis (otomatis dari feed Blogger)

Kode Halaman Penulis Blogger (Artikel Terbaru per Penulis)

Tempel di Halaman Baru Blogger (Page) mode HTML:

<!-- 🌟 Halaman Penulis Otomatis Blogger Warkasa1919.com -->
<div class="author-page">
  <h1 class="author-title">Daftar Penulis Warkasa1919</h1>
  <p class="author-desc">
    Inilah para kontributor yang aktif menulis artikel inspiratif, bermanfaat, dan SEO di <strong>Warkasa1919.com</strong>.
  </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 Ambil Data Penulis + Artikel -->
<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){ // tampilkan max 3 artikel terbaru
        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";

      // Tambahkan sosial media manual per penulis
      let socialHTML = "";
      if(a.name==="Andi Saputra"){
        socialHTML = `
          <div class="author-social">
            <a href="https://facebook.com" target="_blank" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
            <a href="https://twitter.com" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
          </div>
        `;
      }
      if(a.name==="Siti Rahmawati"){
        socialHTML = `
          <div class="author-social">
            <a href="https://instagram.com" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
            <a href="mailto:email@example.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
          </div>
        `;
      }

      // 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>
        ${socialHTML}
        ${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>

Fitur:

Otomatis ambil semua penulis dari Blogger.
Tampilkan jumlah artikel per penulis.
Tampilkan 3 artikel terbaru setiap penulis.
Tambahkan sosial media per penulis (bisa custom manual di script).
Responsif, SEO friendly, lazyload, animasi ringan.

Kesimpulan

Dengan cara ini, kamu bisa membuat halaman member/penulis otomatis di Blogger tanpa ribet. Semua data langsung terhubung ke feed Blogger, sehingga daftar penulis selalu update otomatis setiap ada artikel baru.