Documentation

Reza Noprial Lubis

Menghapus H1

.mb-4.flex.flex-row.items-center.justify-start.last\:mb-0,.mb-4.flex.w-full.flex-row.items-center.justify-between.last\:mb-0,h1{display:none}

Membuat referensi: Tempel Script ini:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Mendapatkan semua elemen sup dengan atribut data-footnote
    var supElements = document.querySelectorAll('sup[data-footnote]');

    // Mendefinisikan objek untuk menyimpan data footnote
    var footnotes = {};

    // Memberikan nomor pada setiap teks yang dikutip
    supElements.forEach(function (sup, index) {
      var footnoteText = sup.getAttribute('data-footnote');
      footnotes[index + 1] = footnoteText;
      sup.innerHTML = '<a href="#footnote-' + (index + 1) + '" class="footnote">' + (index + 1) + '</a>';
    });

    // Menampilkan daftar referensi di akhir artikel
    var footnotesContainer = document.getElementById('footnotes');

    // Menambahkan elemen h2 dengan judul "Referensi"
    var headingElement = document.createElement('h2');
    headingElement.textContent = 'Referensi';

    footnotesContainer.appendChild(headingElement);

    // Menambahkan elemen ol untuk daftar referensi
    var olElement = document.createElement('ol');

    for (var key in footnotes) {
      var liElement = document.createElement('li');
      liElement.innerHTML = footnotes[key];
      liElement.id = 'footnote-' + key;
      olElement.appendChild(liElement);
    }

    footnotesContainer.appendChild(olElement);
  });
</script>

Gunakan dalam post: <sup data-footnote="Reza"></sup>, tempatkan di akhir <div id="footnotes"></div>.

Mengubah URL gambar sesuai ukuran render browser.

<script>
  // Ambil lebar layar pengunjung
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

  // Ambil semua elemen gambar pada halaman
  var images = document.querySelectorAll('img');

  // Loop melalui setiap elemen gambar
  images.forEach(function(image) {
    var imageUrl = image.src;

    // Ambil bagian angka setelah "/s" dan sebelum "-rw/" (contoh: /s1600-rw/)
    var match = imageUrl.match(//s(d+)-rw//);

    if (match) {
      var imageSize = match[1];

      // Hitung tinggi gambar sebagai 50% dari lebar
      var imageHeight = Math.round((screenWidth * 0.5)); // Ubah 0.5 sesuai keinginan Anda

      // Gantilah "/s1600-rw/" dengan "/w<lebar-layar>-h<tinggi-gambar>-c-rw/"
      var newImageUrl = imageUrl.replace('/s' + imageSize + '-rw/', '/w' + screenWidth + '-h' + imageHeight + '-c-rw/');

      // Periksa apakah width sudah diatur dalam HTML
      if (!image.hasAttribute('width')) {
        // Atur lebar hanya jika belum diatur di HTML
        image.width = screenWidth;
      }

      // Atur tinggi pada tag <img>
      image.height = imageHeight;

      // Atur URL gambar yang baru
      image.src = newImageUrl;
    }
  });
</script>

Artikel Full Width

  1. CSS
    Tambahkan CSS ini pada setiap post yang ingin menggunakan Full Width.
          
      <style>
  @media (max-width: 768px) {
    /* CSS in here for mobile only */
    .grid{display:grid; grid-template-columns: 1fr;row-gap:30px;}
    .chapters{display:grid;grid-template-columns:1fr;gap:20px;justify-content:center;}
    .chapter-item{text-align:center;}
    .content{max-width: 800px;margin:0 auto;padding:20px;}
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
  }
  @media (min-width: 1025px) {
    /* CSS in here for desktop only */
    .grid{display:grid; grid-template-columns:1fr 1fr;gap:20px;}
    .chapters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;justify-content:center;}
    .chapter-item{text-align:center;}
    .content{max-width: 800px;margin:0 auto;padding:30px;}
  }
  
  
  article.w-responsiver {
    width: unset !important;
    max-width: none !important;
    margin-top:-25px;
  }
  .content h2{
    font-size:40px;
    font-weight: 200;
    line-height: 1.25;
    margin-bottom: 2.5rem;
    padding:20px 0px;
    border-bottom: 1px solid rgb(255 255 255 / 35%);
  }
  .content h2 strong{
    font-weight: 800;
    display: block;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
  }
  .w-breadcrumbs,.w-post-header{display:none}
  .judul{background:blue;color:white;}
  .w-post-body{font-size:18px;line-height:1.7;}
</style>
  2. HTML Section Hero
    HTML ini untuk digunakan pada bagian Hero.
          
      <section class="w-bg-red w-color-white">
  <div class="content">
    <h2 class="w-center"><strong>WHAT IS COPYWRITING?</strong>The Definitive Guide</h2>
    <div class="grid">
    <div>
      <p>This is the most complete guide to copywriting in 2024.</p>
      <p>Gunakan juga list disini.</p>
      <p>Let’s get started.</p>
    </div>
    <div>
      <figure>
        <img decoding="async" class="a3-notlazy" title="Copywriting – The definitive guide" alt="Copywriting – The definitive guide" data-aspect-ratio="1" src="https://api.backlinko.com/app/uploads/2019/03/copywriting-the-definitive-guide.svg" loading="eager">
      </figure>
    </div>
  </div>
  </div>
</section>
  3. HTML Section Contents 
          
      <section>
  <div class="content">
    <h2 style="font-size: 2rem; font-weight: 600;padding-top:40px;" class="w-center">Contents</h2>
    <div class="chapters">
      <div class="chapter-item eh-child">
    <a href="#local-seo-basics" class="scroll-click"><figure>
        <img
          src="https://api.backlinko.com/app/uploads/2019/12/chapters-copywriting-fundamentals.svg"
          alt="Local SEO Basics"
          loading="lazy"
          class="size-full aligncenter"
        />
      </figure>
      <h6><span>1. </span><span>Local SEO Basics</span></h6></a>
  </div>
      <div class="chapter-item eh-child">
    <a href="#the-map-pack" class="scroll-click"
      ><figure>
        <img
          src="https://api.backlinko.com/app/uploads/2020/03/chapters-the-map-pack.png"
          alt="The Map Pack"
          loading="lazy"
          class="size-full aligncenter"
        />
      </figure>
      <h6><span>2. </span><span>The Map Pack</span></h6></a
    >
  </div>
      <div class="chapter-item eh-child">
    <a href="#local-seo-keyword-research" class="scroll-click"
      ><figure>
        <img
          src="https://api.backlinko.com/app/uploads/2019/10/chapters-local-seo-keyword-research.png"
          alt="Local SEO Keyword Research"
          loading="lazy"
          class="size-full aligncenter"
        />
      </figure>
      <h6><span>3. </span><span>Local SEO Keyword Research</span></h6></a
    >
  </div>
    <div class="chapter-item eh-child">
    <a href="#local-seo-ranking-factors" class="scroll-click"
      ><figure>
        <img
          src="https://api.backlinko.com/app/uploads/2019/10/chapters-local-seo-ranking-factors.png"
          alt="Local SEO Ranking Factors"
          loading="lazy"
          class="size-full aligncenter"
        />
      </figure>
      <h6><span>4. </span><span>Local SEO Ranking Factors</span></h6></a
    >
  </div>
    <div class="chapter-item eh-child">
    <a href="#google-my-business" class="scroll-click"
      ><figure>
        <img
          src="https://api.backlinko.com/app/uploads/2019/10/chapters-google-my-business.png"
          alt="Google My Business"
          loading="lazy"
          class="size-full aligncenter"
        />
      </figure>
      <h6><span>5. </span><span>Google My Business</span></h6></a
    >
  </div>
    <div class="chapter-item eh-child">
    <a href="#on-site-seo-for-local-businesses" class="scroll-click"
      ><figure>
        <img
          src="https://api.backlinko.com/app/uploads/2019/10/chapters-on-site-seo-for-local-businesses.png"
          alt="On-site SEO for Local Businesses"
          loading="lazy"
          class="size-full aligncenter"
        />
      </figure>
      <h6><span>6. </span><span>On-Site SEO For Local Businesses</span></h6></a
    >
  </div>
    <div class="chapter-item eh-child">
    <a href="#nap-citations" class="scroll-click"
      ><figure>
        <img
          src="https://api.backlinko.com/app/uploads/2019/10/chapters-nap-citations.png"
          alt="NAP Citations"
          loading="lazy"
          class="size-full aligncenter"
        />
      </figure>
      <h6><span>7. </span><span>NAP Citations</span></h6></a
    >
  </div>
    <div class="chapter-item eh-child">
    <a href="#local-link-building" class="scroll-click"
      ><figure>
        <img
          src="https://api.backlinko.com/app/uploads/2019/10/chapters-local-link-building.png"
          alt="Local Link Building"
          loading="lazy"
          class="size-full aligncenter"
        />
      </figure>
      <h6><span>8. </span><span>Local Link Building</span></h6></a
    >
  </div>
    <div class="chapter-item eh-child">
    <a href="#advanced-local-seo-tips-and-strategies" class="scroll-click"
      ><figure>
        <img
          src="https://api.backlinko.com/app/uploads/2019/10/chapters-advanced-local-seo-tips-and-strategies.png"
          alt="Advanced Local Tips &amp; Strategies"
          loading="lazy"
          class="size-full aligncenter"
        />
      </figure>
      <h6>
        <span>9. </span><span>Advanced Local SEO Tips and Strategies</span>
      </h6></a
    >
  </div>
  </div>
</div>
</section>
  4. HTML Section Article 
          
      <section class="w-bg-secondary">
  <div class="content">
    <h3>What Is Copywriting?</h3>
    <p>Copywriting is the art and science of writing persuasive text that compels people to take action. It can be used to sell products, generate leads, build brand awareness, and more. Effective copywriting is clear, concise, and persuasive, and it speaks directly to the target audience’s needs and desires.</p>
    <p>Using words that the target audience actually wants to read can yield positive outcomes.</p>
  </div>
</section>

Grid Item


<div id="main-doc">
  <div class="w2">
    <a href="#" class="item">
      <div class="title">Instalasi</div>
      <div class="sub">Deskripsi</div>
    </a>
    <a href="#" class="item">
      <div class="title">Widgets</div>
      <div class="sub">Deskripsi</div>
    </a>
  </div>
</div>

Komentar