1919Live
Mode Gelap
Artikel teks besar

Kode Tampilan ala Facebook

Warkasa1919
September 24, 2025

 Oke, saya sudah sempurnakan kode yang kamu buat supaya:

  • Lebih canggih dan modern (pakai gaya ala Facebook: clean, rounded, shadow, smooth transition).

  • Responsif di semua perangkat (mobile, tablet, desktop).

  • SEO friendly (pakai schema.org, aria-labels, heading jelas).

  • Ringan & cepat (lazyload FontAwesome, CSS ringan).

Berikut hasil versi yang sudah ditingkatkan:

<!-- ✅ Lazyload FontAwesome -->
<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>

<style>
/* ✅ Tampilan ala Facebook */
.ruang-berbagi {
  max-width: 680px;
  margin: 20px auto;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ruang-berbagi:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.ruang-berbagi h2 {
  font-size: 1.4rem;
  margin: 0 0 10px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ruang-berbagi p[contenteditable] {
  min-height: 60px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background: #f5f6f7;
  outline: none;
  transition: border-color .2s;
}
.ruang-berbagi p[contenteditable]:focus {
  border-color: #1877f2;
  background: #fff;
}
.ruang-berbagi .aksi,
.ruang-berbagi .share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ruang-berbagi a {
  flex: 1;
  text-align: center;
  font-size: .85rem;
  text-decoration: none;
  transition: background .2s ease;
}
.ruang-berbagi .share a {
  flex: unset;
  padding: 6px 10px;
}
@media (max-width:600px) {
  .ruang-berbagi {
    margin: 10px;
    border-radius: 8px;
  }
  .ruang-berbagi h2 {
    font-size: 1.2rem;
  }
}
</style>

<!-- ✅ Ruang Berbagi Warkasa1919 -->
<section class="ruang-berbagi w3-animate-bottom" role="region" aria-labelledby="ruang-berbagi-title">
  <div class="w3-container w3-padding" itemscope itemtype="https://schema.org/CreativeWork">

    <!-- ✅ Heading SEO -->
    <h2 id="ruang-berbagi-title" class="w3-text-indigo" itemprop="headline">
      <i class="fa-solid fa-users"></i> Ruang Berbagi & Informasi
    </h2>

    <!-- ✅ Konten Edit -->
    <p contenteditable="true"
       aria-label="Tulis ceritamu di sini"
       itemprop="text">
       ✍️ Tulis ceritamu...
    </p>

    <!-- ✅ Tombol Aksi -->
    <div class="aksi">
      <!-- Tombol Blogger -->
      <a href="https://draft.blogger.com/blog/posts/8845430381950705595" 
         class="w3-button w3-blue w3-round w3-small w3-hover-indigo w3-mobile"
         rel="noopener noreferrer" target="_blank"
         title="Tulis Artikel di Blogger" aria-label="Tulis artikel di Blogger"
         itemprop="url">
         <i class="fa fa-pencil-alt"></i> Kirim Artikel
      </a>

      <!-- Tombol WhatsApp Admin -->
      <a href="https://api.whatsapp.com/send?phone=6282288994110&text=Halo%20admin%20Warkasa1919.com%20saya%20mau%20bergabung%20menjadi%20kontributor" 
         class="w3-button w3-green w3-round w3-small w3-hover-teal w3-mobile"
         rel="noopener noreferrer" target="_blank"
         title="Hubungi Admin via WhatsApp" aria-label="Hubungi Admin via WhatsApp"
         itemprop="url">
         <i class="fab fa-whatsapp"></i> Hubungi Admin
      </a>
    </div>

    <!-- ✅ Tombol Share Sosial -->
    <div class="share w3-small">
      <span class="w3-opacity"><i class="fa fa-share-alt"></i> Bagikan ke:</span>
      <div class="w3-flex w3-flex-wrap" style="gap:6px; margin-top:6px;">
        <a id="share-facebook" class="w3-button w3-round w3-small w3-blue w3-hover-indigo w3-mobile"
           target="_blank" rel="noopener" title="Bagikan ke Facebook"><i class="fab fa-facebook-f"></i></a>
        <a id="share-twitter" class="w3-button w3-round w3-small w3-black w3-hover-gray w3-mobile"
           target="_blank" rel="noopener" title="Bagikan ke Twitter/X"><i class="fab fa-x-twitter"></i></a>
        <a id="share-telegram" class="w3-button w3-round w3-small w3-cyan w3-hover-blue w3-mobile"
           target="_blank" rel="noopener" title="Bagikan ke Telegram"><i class="fab fa-telegram"></i></a>
        <a id="share-whatsapp" class="w3-button w3-round w3-small w3-green w3-hover-teal w3-mobile"
           target="_blank" rel="noopener" title="Bagikan ke WhatsApp"><i class="fab fa-whatsapp"></i></a>
      </div>
    </div>

  </div>
</section>

<!-- ✅ Script Share Otomatis -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const pageUrl   = encodeURIComponent(window.location.href);
  const pageTitle = encodeURIComponent(document.title);

  document.getElementById("share-facebook").href = `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;
  document.getElementById("share-twitter").href  = `https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`;
  document.getElementById("share-telegram").href = `https://t.me/share/url?url=${pageUrl}&text=${pageTitle}`;
  document.getElementById("share-whatsapp").href = `https://api.whatsapp.com/send?text=${pageTitle}%20${pageUrl}`;
});
</script>

<!-- ✅ Schema JSON-LD untuk SEO -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CreativeWork",
  "name": "Ruang Berbagi & Informasi",
  "url": "https://www.warkasa1919.com",
  "description": "Wadah berbagi cerita, artikel, dan informasi di Warkasa1919.com. Kontributor bisa menulis artikel, menghubungi admin, serta membagikan ke media sosial.",
  "creator": {
    "@type": "Organization",
    "name": "Warkasa1919",
    "url": "https://www.warkasa1919.com"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Warkasa1919",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.warkasa1919.com/favicon.ico"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.warkasa1919.com"
  }
}
</script>

✨ Perubahan penting yang saya lakukan:

  • Tampilan ala Facebook → card putih, rounded, shadow, efek hover.

  • Responsif → pakai max-width, flex-wrap, media query.

  • Interaktif → ada efek hover & transition smooth.

  • SEO → schema.org + heading rapi + aria-label.

  • Ringan → tetap pakai W3CSS & FontAwesome lazyload.

Mau saya tambahkan fitur dark mode otomatis (menyesuaikan dengan sistem pengguna, seperti Facebook)?


Oke 🚀 saya tambahkan tombol switch manual Dark/Light Mode biar pengunjung bisa memilih tampilan sesuai keinginan, meskipun device mereka otomatis mode terang/gelap.

🔑 Fitur tambahan:

  • Tombol toggle dengan ikon ☀️ (light) dan 🌙 (dark).

  • Disimpan di localStorage supaya pilihan user tetap tersimpan saat reload.

  • Tetap SEO + responsif.

Berikut kode yang sudah saya upgrade:

<!-- ✅ Lazyload FontAwesome -->
<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>

<style>
/* ✅ Tampilan ala Facebook */
.ruang-berbagi {
  max-width: 680px;
  margin: 20px auto;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease, background .3s, color .3s;
}
.ruang-berbagi:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.ruang-berbagi h2 {
  font-size: 1.4rem;
  margin: 0 0 10px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ruang-berbagi p[contenteditable] {
  min-height: 60px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background: #f5f6f7;
  outline: none;
  transition: border-color .2s, background .3s, color .3s;
}
.ruang-berbagi p[contenteditable]:focus {
  border-color: #1877f2;
  background: #fff;
}
.ruang-berbagi .aksi,
.ruang-berbagi .share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ruang-berbagi a {
  flex: 1;
  text-align: center;
  font-size: .85rem;
  text-decoration: none;
  transition: background .2s ease;
}
.ruang-berbagi .share a {
  flex: unset;
  padding: 6px 10px;
}
@media (max-width:600px) {
  .ruang-berbagi { margin: 10px; border-radius: 8px; }
  .ruang-berbagi h2 { font-size: 1.2rem; }
}

/* ✅ Dark Mode */
body.dark { background: #18191a; color: #e4e6eb; }
body.dark .ruang-berbagi { background: #242526; color: #e4e6eb; box-shadow: 0 2px 10px rgba(0,0,0,.6); }
body.dark .ruang-berbagi p[contenteditable] { background: #3a3b3c; border-color: #555; color: #e4e6eb; }
body.dark .ruang-berbagi p[contenteditable]:focus { background: #18191a; border-color: #1877f2; }
body.dark .ruang-berbagi h2 { color: #2e89ff; }

/* ✅ Toggle Dark/Light */
#darkModeToggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #1877f2;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
  transition: background .3s, transform .2s;
  z-index: 1000;
}
#darkModeToggle:hover { background: #145dbf; transform: scale(1.1); }
</style>

<!-- ✅ Ruang Berbagi Warkasa1919 -->
<section class="ruang-berbagi w3-animate-bottom" role="region" aria-labelledby="ruang-berbagi-title">
  <div class="w3-container w3-padding" itemscope itemtype="https://schema.org/CreativeWork">

    <!-- ✅ Heading SEO -->
    <h2 id="ruang-berbagi-title" itemprop="headline">
      <i class="fa-solid fa-users"></i> Ruang Berbagi & Informasi
    </h2>

    <!-- ✅ Konten Edit -->
    <p contenteditable="true"
       aria-label="Tulis ceritamu di sini"
       itemprop="text">
       ✍️ Tulis ceritamu...
    </p>

    <!-- ✅ Tombol Aksi -->
    <div class="aksi">
      <a href="https://draft.blogger.com/blog/posts/8845430381950705595" 
         class="w3-button w3-blue w3-round w3-small w3-hover-indigo w3-mobile"
         rel="noopener noreferrer" target="_blank"
         title="Tulis Artikel di Blogger" aria-label="Tulis artikel di Blogger"
         itemprop="url">
         <i class="fa fa-pencil-alt"></i> Kirim Artikel
      </a>

      <a href="https://api.whatsapp.com/send?phone=6282288994110&text=Halo%20admin%20Warkasa1919.com%20saya%20mau%20bergabung%20menjadi%20kontributor" 
         class="w3-button w3-green w3-round w3-small w3-hover-teal w3-mobile"
         rel="noopener noreferrer" target="_blank"
         title="Hubungi Admin via WhatsApp" aria-label="Hubungi Admin via WhatsApp"
         itemprop="url">
         <i class="fab fa-whatsapp"></i> Hubungi Admin
      </a>
    </div>

    <!-- ✅ Tombol Share Sosial -->
    <div class="share w3-small">
      <span class="w3-opacity"><i class="fa fa-share-alt"></i> Bagikan ke:</span>
      <div class="w3-flex w3-flex-wrap" style="gap:6px; margin-top:6px;">
        <a id="share-facebook" class="w3-button w3-round w3-small w3-blue w3-hover-indigo w3-mobile"
           target="_blank" rel="noopener" title="Bagikan ke Facebook"><i class="fab fa-facebook-f"></i></a>
        <a id="share-twitter" class="w3-button w3-round w3-small w3-black w3-hover-gray w3-mobile"
           target="_blank" rel="noopener" title="Bagikan ke Twitter/X"><i class="fab fa-x-twitter"></i></a>
        <a id="share-telegram" class="w3-button w3-round w3-small w3-cyan w3-hover-blue w3-mobile"
           target="_blank" rel="noopener" title="Bagikan ke Telegram"><i class="fab fa-telegram"></i></a>
        <a id="share-whatsapp" class="w3-button w3-round w3-small w3-green w3-hover-teal w3-mobile"
           target="_blank" rel="noopener" title="Bagikan ke WhatsApp"><i class="fab fa-whatsapp"></i></a>
      </div>
    </div>

  </div>
</section>

<!-- ✅ Tombol Toggle Dark/Light -->
<button id="darkModeToggle" aria-label="Ganti Mode">
  🌙
</button>

<!-- ✅ Script -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const toggleBtn = document.getElementById("darkModeToggle");

  // Cek preferensi user
  const userPref = localStorage.getItem("theme");
  if (userPref === "dark" || (!userPref && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
    document.body.classList.add("dark");
    toggleBtn.textContent = "☀️";
  }

  // Toggle event
  toggleBtn.addEventListener("click", () => {
    document.body.classList.toggle("dark");
    if (document.body.classList.contains("dark")) {
      toggleBtn.textContent = "☀️";
      localStorage.setItem("theme", "dark");
    } else {
      toggleBtn.textContent = "🌙";
      localStorage.setItem("theme", "light");
    }
  });

  // ✅ Script Share Otomatis
  const pageUrl   = encodeURIComponent(window.location.href);
  const pageTitle = encodeURIComponent(document.title);
  document.getElementById("share-facebook").href = `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;
  document.getElementById("share-twitter").href  = `https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`;
  document.getElementById("share-telegram").href = `https://t.me/share/url?url=${pageUrl}&text=${pageTitle}`;
  document.getElementById("share-whatsapp").href = `https://api.whatsapp.com/send?text=${pageTitle}%20${pageUrl}`;
});
</script>

<!-- ✅ Schema JSON-LD untuk SEO -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CreativeWork",
  "name": "Ruang Berbagi & Informasi",
  "url": "https://www.warkasa1919.com",
  "description": "Wadah berbagi cerita, artikel, dan informasi di Warkasa1919.com. Kontributor bisa menulis artikel, menghubungi admin, serta membagikan ke media sosial.",
  "creator": {
    "@type": "Organization",
    "name": "Warkasa1919",
    "url": "https://www.warkasa1919.com"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Warkasa1919",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.warkasa1919.com/favicon.ico"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.warkasa1919.com"
  }
}
</script>

🔹 Sekarang:

  • Mode otomatis mengikuti device.

  • User bisa pilih manual dengan tombol 🌙/☀️.

  • Pilihan disimpan di localStorage → tidak hilang saat reload.

Versi dark mode toggle + notifikasi ringan (mirip Facebook tapi tetap ringan).

Kode ini tetap responsif, SEO, dan tampil modern:

<!-- ✅ Lazyload FontAwesome -->
<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>

<!-- ✅ Dark Mode CSS -->
<style>
  body.dark-mode {
    background: #18191a;
    color: #e4e6eb;
  }
  body.dark-mode .w3-card {
    background: #242526 !important;
    color: #e4e6eb !important;
  }
  body.dark-mode .w3-button {
    border: none;
  }
  .toggle-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    cursor: pointer;
  }
  .notif-badge {
    position: relative;
  }
  .notif-badge span {
    position: absolute;
    top: -6px;
    right: -8px;
    background: red;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 50%;
  }
</style>

<!-- ✅ Ruang Berbagi Warkasa1919 -->
<section class="w3-row-padding w3-animate-bottom" role="region" aria-labelledby="ruang-berbagi">
  <div class="w3-col m12">
    <article class="w3-card w3-round w3-white w3-hover-shadow w3-animate-opacity" itemscope itemtype="https://schema.org/CreativeWork">
      <div class="w3-container w3-padding">

        <!-- ✅ Tombol Dark Mode -->
        <div class="toggle-btn" id="darkToggle" title="Ubah Mode">
          <i class="fa-solid fa-moon"></i>
        </div>

        <!-- ✅ Heading SEO -->
        <h2 id="ruang-berbagi" class="w3-opacity w3-xlarge w3-text-indigo" itemprop="headline">
          <i class="fa-solid fa-users"></i> Ruang Berbagi & Informasi
        </h2>

        <!-- ✅ Konten Edit -->
        <p contenteditable="true"
           class="w3-border w3-padding w3-round w3-light-grey w3-small"
           aria-label="Tulis ceritamu di sini"
           itemprop="text">
           ✍️ Tulis ceritamu...
        </p>

        <!-- ✅ Tombol Aksi -->
        <div class="w3-margin-top w3-flex w3-flex-wrap" style="gap:8px;">
          <a href="https://draft.blogger.com/blog/posts/8845430381950705595" 
             class="w3-button w3-blue w3-round w3-small w3-hover-indigo w3-mobile"
             target="_blank" rel="noopener noreferrer" itemprop="url">
             <i class="fa fa-pencil-alt"></i> Kirim Artikel
          </a>

          <a href="https://api.whatsapp.com/send?phone=6282288994110&text=Halo%20admin%20Warkasa1919.com%20saya%20mau%20bergabung%20menjadi%20kontributor" 
             class="w3-button w3-green w3-round w3-small w3-hover-teal w3-mobile"
             target="_blank" rel="noopener noreferrer" itemprop="url">
             <i class="fab fa-whatsapp"></i> Hubungi Admin
          </a>

          <!-- 🔔 Notifikasi -->
          <button class="w3-button w3-round w3-small w3-red w3-hover-pink w3-mobile notif-badge" id="notifBtn">
            <i class="fa-solid fa-bell"></i> <span id="notifCount">0</span>
          </button>
        </div>

        <!-- ✅ Tombol Share Sosial -->
        <div class="w3-margin-top w3-small">
          <span class="w3-opacity"><i class="fa fa-share-alt"></i> Bagikan ke:</span>
          <div class="w3-flex w3-flex-wrap" style="gap:6px; margin-top:5px;">
            <a id="share-facebook" class="w3-button w3-round w3-small w3-blue w3-hover-indigo w3-mobile" target="_blank" rel="noopener">
              <i class="fab fa-facebook-f"></i>
            </a>
            <a id="share-twitter" class="w3-button w3-round w3-small w3-black w3-hover-gray w3-mobile" target="_blank" rel="noopener">
              <i class="fab fa-x-twitter"></i>
            </a>
            <a id="share-telegram" class="w3-button w3-round w3-small w3-cyan w3-hover-blue w3-mobile" target="_blank" rel="noopener">
              <i class="fab fa-telegram"></i>
            </a>
            <a id="share-whatsapp" class="w3-button w3-round w3-small w3-green w3-hover-teal w3-mobile" target="_blank" rel="noopener">
              <i class="fab fa-whatsapp"></i>
            </a>
          </div>
        </div>

      </div>
    </article>
  </div>
</section>

<!-- ✅ Script -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const pageUrl   = encodeURIComponent(window.location.href);
  const pageTitle = encodeURIComponent(document.title);

  // Share link otomatis
  document.getElementById("share-facebook").href = `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;
  document.getElementById("share-twitter").href  = `https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`;
  document.getElementById("share-telegram").href = `https://t.me/share/url?url=${pageUrl}&text=${pageTitle}`;
  document.getElementById("share-whatsapp").href = `https://api.whatsapp.com/send?text=${pageTitle}%20${pageUrl}`;

  // ✅ Dark Mode Toggle
  const darkToggle = document.getElementById("darkToggle");
  darkToggle.addEventListener("click", () => {
    document.body.classList.toggle("dark-mode");
    darkToggle.innerHTML = document.body.classList.contains("dark-mode") 
      ? '<i class="fa-solid fa-sun"></i>' 
      : '<i class="fa-solid fa-moon"></i>';
  });

  // ✅ Simulasi Notifikasi
  let notifCount = 0;
  const notifBtn = document.getElementById("notifBtn");
  const notifCountEl = document.getElementById("notifCount");

  setInterval(() => {
    notifCount++;
    notifCountEl.textContent = notifCount;
  }, 10000); // setiap 10 detik ada notif baru (simulasi)

  notifBtn.addEventListener("click", () => {
    notifCount = 0;
    notifCountEl.textContent = 0;
    alert("Tidak ada notifikasi baru 😊");
  });
});
</script>

✨ Fitur baru:

  • 🌙 Dark/Light Mode Toggle (ikon berubah otomatis).

  • 🔔 Simulasi Notifikasi (badge merah, bertambah tiap 10 detik, bisa direset).

  • 💻 Responsif & SEO tetap aman.

  • 🎨 Desain mirip Facebook: card, tombol bulat, ikon modern.

Berita Terkait
Warkasa1919
Warkasa1919
Untuk segala sesuatu ada Masanya, untuk apapun di bawah Langit ada Waktunya.
Berita Terkait
Posting Komentar
Batal

]]>
💖 Donasi