KODE UNTUK MENAMBAHKAN SKETCH DI BLOGGER

(Ini adalah kode sisipan untuk membuat postingan di blogger, tujuannya untuk mempermudah menambahkan kode yang akan di jelaskan)

<p><b><i>B. SKETCH YANG PERLU DIKETIK:</i></b></p><div style="border: 2px solid black; height: 300px; overflow-x: hidden; overflow-y: scroll; overflow: hidden scroll; width: 500px;"><div style="height: 250%;"><pre>#include &lt;Wire.h&gt;
#include &lt;LiquidCrystal_I2C.h&gt;

LiquidCrystal_I2C lcd(0x27, 16, 2); // alamat 0x27, ukuran LCD 16x2

String teks = "Kebersihan sebagian dari iman. Oleh Eskul Robomadina   "; // tambahkan spasi di akhir agar halus
int posisi = 0;

void setup() {
  lcd.init();
  lcd.backlight();
}

void loop() {
  lcd.clear();
  lcd.setCursor(0, 0);
  lcd.print(teks.substring(posisi, posisi + 16)); // tampilkan 16 karakter per langkah
  posisi++;
  if (posisi &gt; teks.length() - 16) {
    posisi = 0; // ulang dari awal
  }
  delay(300); // atur kecepatan scroll (ms)
}
</pre><div><br /></div></div></div>

SKETCH YANG PERLU DIKETIK:

<p><b><i>B. SKETCH YANG PERLU DIKETIK:</i></b></p><div style="border: 2px solid black; height: 300px; overflow-x: hidden; overflow-y: scroll; overflow: hidden scroll; width: 500px;"><div style="height: 250%;"><pre>#include &lt;Wire.h&gt;
#include &lt;LiquidCrystal_I2C.h&gt;

LiquidCrystal_I2C lcd(0x27, 16, 2); // alamat 0x27, ukuran LCD 16x2

String teks = "Kebersihan sebagian dari iman. Oleh Eskul Robomadina   "; // tambahkan spasi di akhir agar halus
int posisi = 0;

void setup() {
  lcd.init();
  lcd.backlight();
}

void loop() {
  lcd.clear();
  lcd.setCursor(0, 0);
  lcd.print(teks.substring(posisi, posisi + 16)); // tampilkan 16 karakter per langkah
  posisi++;
  if (posisi &gt; teks.length() - 16) {
    posisi = 0; // ulang dari awal
  }
  delay(300); // atur kecepatan scroll (ms)
}
</pre><div><br /></div></div></div>

SKETCH YANG PERLU DIKETIK (DENGAN TOMBOL COPY):

<p><b><i>B. SKETCH YANG PERLU DIKETIK:</i></b></p>

<div class="code-container" style="border: 2px solid black; width: 500px; height: 300px; position: relative; overflow-y: auto; overflow-x: hidden;">

  <button class="copy-btn" aria-label="Salin kode" title="Salin kode">
    <svg viewBox="0 0 24 24" fill="none" width="16" height="16">
      <path d="M16 21H6a2 2 0 0 1-2-2V7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
      <rect x="8" y="3" width="13" height="13" rx="2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <span>Copy</span>
  </button>

  <pre>#include &lt;Wire.h&gt;
#include &lt;LiquidCrystal_I2C.h&gt;

LiquidCrystal_I2C lcd(0x27, 16, 2); // alamat 0x27, ukuran LCD 16x2

String teks = "Kebersihan sebagian dari iman. Oleh Eskul Robomadina   "; // tambahkan spasi di akhir agar halus
int posisi = 0;

void setup() {
  lcd.init();
  lcd.backlight();
}

void loop() {
  lcd.clear();
  lcd.setCursor(0, 0);
  lcd.print(teks.substring(posisi, posisi + 16)); // tampilkan 16 karakter per langkah
  posisi++;
  if (posisi &gt; teks.length() - 16) {
    posisi = 0; // ulang dari awal
  }
  delay(300); // atur kecepatan scroll (ms)
}</pre>
</div>

<style>
.code-container {
  background: #f9fafb;
  font-family: "Courier New", monospace;
  border-radius: 6px;
  position: relative;
}

.code-container pre {
  margin: 0;
  padding: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e5e7eb;
  border: none;
  color: #111827;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background: #d1d5db;
  color: #000;
}

.copy-btn.copied {
  background: #10b981;
  color: white;
}

.copy-btn svg {
  display: inline-block;
}
</style>

<script>
document.querySelectorAll('.copy-btn').forEach(button => {
  button.addEventListener('click', async () => {
    const code = button.parentElement.querySelector('pre').innerText;
    try {
      await navigator.clipboard.writeText(code);
      button.classList.add('copied');
      button.querySelector('span').innerText = 'Tersalin!';
      setTimeout(() => {
        button.classList.remove('copied');
        button.querySelector('span').innerText = 'Copy';
      }, 1800);
    } catch (err) {
      alert('Gagal menyalin!');
    }
  });
});
</script>