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

Warkasa1919
Warkasa1919

Konten Premium Warkasa1919

Akses Lifetime • Script Eksklusif • Tutorial Langka • Fiksi

Premium Warkasa1919

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.
Diposting oleh:
Warkasa1919
Warkasa1919
Untuk segala sesuatu ada Masanya, untuk apapun di bawah Langit ada Waktunya.
Anda mungkin menyukai postingan ini Tunjukkan semua

Tanya AI

Gemini AI
Google
ChatGPT
ChatGPT
Meta AI
Meta
Jasa Pembuatan Website 1919
Jasa Pembuatan Website 1919
Rp 3.410.445
WordPress
Jasa Pembuatan Blog
Jasa Pembuatan Blog
Rp 1.878.293
Blogger
Konten Premium
Konten Premium
Rp 25.000
Langganan Konten Premium
Toko Buku Online
Toko Buku Online
Rp 110.000
Buku
Property
Property di Pekanbaru
Rp -
Hubungi Kami
Jasa Pembuatan Peta
Jasa Pemetaan 1919
Rp -
Hubungi Kami
Domainesia Hosting
Web Hosting
Cek Harga Domain
Domainesia

Lihat Peta

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

Dukung Warkasa1919

Bantu kami terus menghadirkan artikel premium, fitur canggih & projek digital berkualitas.

๐Ÿ’ฌ Donasi via WhatsApp ๐Ÿ“ฑ Semua Bank ๐ŸŒJasa Pembuatan Website ๐Ÿ’™Artikel Berbayar ๐Ÿ’™Donasi
Tutup