Doc

Halaman Full Width

Tambahkan class ini di Atas:

<style>
  .post_body ul.pl-0{padding-left: unset;}

  main#elcreative_main {
    max-width: 100vw !important;
    background-color: var(--colorBackground);
    padding:0px !important;
  }

  article, .post_body {
    max-width: 100vw !important;
  }

  .flex.w-full.max-w-4xl.flex-col.items-start.justify-center.pb-4 {
    display: none !important;
  }

</style>

Gunakan kode ini di setiap section yang ingin dibuat:

<section class="text-colorBackground" style="max-width:100vw;background-color:#01a17e;">
  <div class="max-w-3xl mx-auto p-4 flex flex-col gap-8">
....
</div>
</section>

Gunakan ini di akhir postingan. Kode ini berfungsi untuk membuat H1 default menjadi aria-hidden="true". Bagus untuk SEO.

<div data-aria-hidden="true"></div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var marker = document.querySelector('[data-aria-hidden="true"]');
    if (marker) {
        var h1 = document.querySelector("h1");
        if (h1) {
            h1.setAttribute("aria-hidden", "true");
        }
    }
});
</script>

Referensi

<sup class="footnote-marker" data-footnote="jurnal" data-pengarang="Fahmi Hariri" data-judul="Pendidikan dan Modernisasi" data-jurnal="Jurnal Pendidikan Islam" data-volume="5" data-nomor="2" data-halaman="100-110" data-tahun="2023" data-doi="10.1234/jpi.2023.01" data-url="https://example.com" data-akses="2023-12-25"></sup>

<span class="footnote-marker" data-footnote="buku" data-pengarang="Ahmad Darras" data-judul="Pendidikan Islam" data-tahun="2022" data-penerbit="Pustaka Islam" data-kota="Jakarta"></span>

<div id="footnote-container"></div>

Breadcrumb

<div class="custom-breadcrumb" data-label1="Home" data-label2="Tools" data-label-url2="/p/tools.html"></div>

<div class="custom-breadcrumb" data-label1="Home" data-label2="Tools" data-label-url2="/p/tools.html" data-label3="VOSviewer" data-label-url3="/p/vosviewer.html"></div>

<div class="mb-8 flex w-full flex-col items-start justify-center last:mb-4">
  <div class="flex w-full flex-row items-start justify-start last:mb-0">
    <svg class="shrink-0 grow-0 text-colorKey dark:text-colorDarkKey ltr:mr-4 rtl:ml-4" viewBox="0 0 24 24" height="24" width="24" fill="currentColor" aria-hidden="true"><path d="M10.6 15.02c-.18 0-.36-.07-.49-.2l-1.86-1.86c-.27-.27-.27-.71 0-.99s.71-.27.99 0l1.37 1.37 4.16-4.16c.27-.27.71-.27.99 0s.27.71 0 .99l-4.65 4.65c-.14.14-.31.2-.49.2Zm9.83 5.41C22 18.86 22 16.57 22 12c0-.39-.31-.7-.7-.7s-.7.31-.7.7c0 4.19 0 6.29-1.16 7.45-1.16 1.16-3.26 1.16-7.45 1.16s-6.29 0-7.45-1.16C3.38 18.29 3.38 16.19 3.38 12s0-6.29 1.16-7.45C5.7 3.39 7.8 3.39 11.99 3.39s6.29 0 7.45 1.16c.71.71 1.01 1.73 1.11 3.76.02.39.35.68.73.66.39-.02.68-.35.66-.73-.1-2-.4-3.56-1.52-4.68-1.57-1.57-3.86-1.57-8.43-1.57s-6.87 0-8.43 1.57c-1.57 1.57-1.57 3.86-1.57 8.43s0 6.87 1.57 8.43c1.57 1.57 3.86 1.57 8.43 1.57s6.87 0 8.43-1.57Z"></path></svg>
    <a href="#"><div class="no_style !pb-0 !mt-0 !mb-0 inline-block text-colorMeta first:mt-0 dark:text-colorDarkMeta" data-text="">Mengenal Google Data Studio</div></a>
  </div>
</div>

Width Height Image

List Style

<ul class="ml-0">
  <li class="flex items-start mb-2">
    <svg class="w-6 h-6 mr-2 flex-shrink-0 " fill="currentcolor" widht="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M6,13H14L10.5,16.5L11.92,17.92L17.84,12L11.92,6.08L10.5,7.5L14,11H6V13Z" /></svg>
    <span class="ml-2">Facebook - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</span>
  </li>
  <li class="flex items-start mb-2">
    <svg class="w-6 h-6 mr-2 flex-shrink-0" fill="currentcolor" widht="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M6,13H14L10.5,16.5L11.92,17.92L17.84,12L11.92,6.08L10.5,7.5L14,11H6V13Z" /></svg>
    <span class="ml-2">Twitter - Lorem ipsum dolor sit amet, <span class="font-bold">consectetur</span> adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</span>
  </li>
  <li class="flex items-start">
    <svg class="w-6 h-6 mr-2 flex-shrink-0" fill="currentcolor" widht="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M6,13H14L10.5,16.5L11.92,17.92L17.84,12L11.92,6.08L10.5,7.5L14,11H6V13Z" /></svg>
    <span class="ml-2">Instagram - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</span>
  </li>
</ul>