Buat Pre Code Pakai Blockquete Di Blogger

Pada artikel turorial halll madiun kali ini akan membagikan Cara Membuat <pre> Code Otomatis Pakai Blockquete yang dilengkapi dengan tombol Copy Atau Salin.

Blogger pemula seperti saya dulu pasti punya kebiasan yang unik. Salah satu keunikanya yaitu menggunakan BLOCKQUETE untuk membungkus kode html, css , javascript yang dibagikan didalam postingan artikel.

Banyak banget alasan kenapa blogger pemula lakuin ini karena mudahnya menggunakan tag blockquete untuk membungkua html dll. Dan di tambah banyak keterbatasan blogger pemula yang belum faham ilmu dasar ngeblog. Sehingga banyam yang gal tau kalau tampilam edit html saat menulis blog di post editor blogger punya segudang manfaat. Ya salah satunya dengan membuat sebuah widget pre code untuk membungkus kode html didalam postingan blog.

Nah artikel yang saya bagikan ini bisa bemanfaat buat penulis blog pemula dengan tema tutorial yang membungkus paragraf kusus menggunakan blockquete.

Jadi jika anda membagiman artikel tutorial html css dan kode html css sobat bungkus menggunakan blockquete maka setelah di publikasikan tampilan dari blockquete otomatis berubah dan dilengkapi tombol copy yang bisa bemanfaat.

Bagi blogger pemula, sering kali ada kebiasaan unik dalam menulis dan membagikan artikel. Salah satu kebiasaan tersebut adalah menggunakan elemen `<blockquote>` untuk membungkus kode HTML, CSS, atau JavaScript dalam postingan. Hal ini wajar karena elemen blockquote relatif mudah digunakan dan memberikan tampilan sederhana untuk membedakan kode dari teks biasa.

Namun, tahukah Anda bahwa Anda bisa meningkatkan tampilan dan fungsi kode tersebut? Dengan sedikit modifikasi, Anda dapat mengubah blockquote menjadi elemen `<pre>` yang lebih sesuai untuk menampilkan kode pemrograman. Tidak hanya itu, Anda juga bisa menambahkan tombol salin (copy button) untuk memudahkan pembaca menyalin kode. Dalam artikel ini, saya akan membagikan tutorial lengkapnya. Yuk, kita mulai!

Kenapa Memilih `<pre>` dan Tombol Salin?

Elemen `<pre>` dirancang khusus untuk menampilkan teks dengan format tetap (preserved formatting). Ini sangat cocok untuk menampilkan kode karena:

1. Format yang Rapi: Elemen ini mempertahankan spasi dan baris baru.

2. Fungsionalitas Tinggi: Dengan sedikit tambahan CSS dan JavaScript, tampilannya bisa lebih profesional.

Tambahan tombol salin pada elemen ini memberikan kemudahan bagi pembaca untuk menyalin kode tanpa harus memilihnya secara manual. Fitur ini sangat membantu terutama untuk blog tutorial yang sering membagikan snippet kode.

Membuat `<pre>` Code Dengan BlockQuete Otomatis dengan Tombol Salin di Blogger

Berikut langkah-langkahnya:

1. Menambahkan Kode JavaScript

Langkah pertama adalah menambahkan kode JavaScript ke dalam template blog Anda. Kode ini berfungsi untuk:

- Mengubah semua elemen blockquote menjadi elemen `<pre>`.

- Menambahkan tombol salin pada setiap elemen `<pre>`.

Langkah Pemasangan

1. Masuk ke dashboard Blogger Anda.

2. Pilih Tema > Edit HTML.

3. Salin kode berikut dan tempelkan sebelum tag penutup `</body>`:

<script>

//<![CDATA[

let foundBlockquote = document.querySelectorAll("blockquote");

for (let i = 0; i < foundBlockquote.length; i++) {

  let camouflage = foundBlockquote[i];

  let replacement = document.createElement("pre");

  replacement.innerHTML += '<code>' + camouflage.innerHTML + '</code>';

  replacement.innerHTML = replacement.innerHTML.replace(/(<|&lt;)br\s*\/*(>|&gt;)/g, ' ');

  camouflage.replaceWith(replacement);

  const addprelem = document.querySelectorAll("pre");

  addprelem.forEach(preatr => { 

    preatr.classList.add('notranslate');

    preatr.tabIndex = 0;

    preatr.setAttribute('data-language', 'code'); 

  });

}

// Menambahkan tombol salin ke setiap elemen <pre>

document.querySelectorAll("pre").forEach(pre => {

  let copyButton = document.createElement("button");

  copyButton.textContent = "Salin";

  copyButton.addEventListener("click", () => {

    let codeContent = pre.querySelector("code").textContent;

    navigator.clipboard.writeText(codeContent).then(() => {

      alert("Konten berhasil disalin!");

    }).catch(err => {

      console.error("Gagal menyalin: ", err);

    });

  });

  pre.appendChild(copyButton);

});

//]]>

</script>

Kode di atas akan:

1. Mencari elemen blockquote di artikel Anda.

2. Mengubah elemen blockquote menjadi `<pre>` yang dilengkapi dengan elemen `<code>`.

3. Menambahkan tombol salin yang berfungsi saat diklik.

2. Menambahkan Kode CSS

Langkah berikutnya adalah mempercantik tampilan `<pre>` dan tombol salin menggunakan CSS. Gaya ini akan memberikan tampilan modern dan profesional untuk kode Anda.

Langkah Pemasangan

1. Masuk ke dashboard Blogger Anda.

2. Pilih Tema > Edit HTML.

3. Tempelkan kode CSS berikut sebelum tag penutup `</style>` atau di dalam `<b:skin>`:

/* Gaya untuk <pre> dan <code> */

pre {

  position: relative;

  background-color: #282c34; /* Warna latar belakang */

  color: #abb2bf; /* Warna teks */

  padding: 20px;

  border-radius: 8px;

  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  font-size: 14px;

  line-height: 1.6;

  overflow-x: auto;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  margin: 20px 0;

}

code {

  background: none;

  color: inherit;

  font-size: inherit;

}

/* Tombol Salin */

pre button {

  position: absolute;

  top: 10px;

  right: 10px;

  background-color: #61dafb; /* Warna tombol */

  color: #282c34;

  border: none;

  border-radius: 5px;

  padding: 5px 10px;

  font-size: 12px;

  cursor: pointer;

  transition: background-color 0.3s ease, color 0.3s ease;

}

pre button:hover {

  background-color: #21a1f1; /* Warna hover */

  color: #fff; /* Warna teks saat hover */

}

pre button:focus {

  outline: none;

  box-shadow: 0 0 5px #61dafb;

}

Kode ini menciptakan tampilan modern untuk elemen `<pre>` Code dan tombol salin.

---

3. Uji Coba

Setelah menambahkan kode JavaScript dan CSS, saatnya menguji hasilnya:

1. Buat postingan baru di Blogger.

2. Masukkan kode yang ingin Anda tampilkan di dalam elemen `<blockquote>`, misalnya:

<blockquote>

&lt;h1&gt;Hello World!&lt;/h1&gt;

</blockquote>

3. Publikasikan dan lihat hasilnya. Elemen blockquote akan otomatis berubah menjadi `<pre>` dengan tombol salin.

 Keuntungan Menggunakan Fitur Pre Code Ini

1. Kemudahan bagi Pembaca: Pembaca dapat langsung menyalin kode tanpa harus memilih teks secara manual.

2. Tampilan Profesional: Blog Anda akan terlihat lebih modern dan ramah pengguna.

3. Fleksibel untuk Berbagai Kode: Mendukung HTML, CSS, JavaScript, dan bahasa pemrograman lainnya.

Membuat elemen <pre> dengan tombol salin di Blogger adalah langkah sederhana yang memberikan dampak besar pada kualitas blog Anda. Dengan tutorial ini, Anda tidak hanya meningkatkan pengalaman pembaca, tetapi juga memperlihatkan keseriusan Anda dalam menyajikan konten berkualitas.

Cobalah langkah-langkah di atas dan lihat bagaimana blog Anda menjadi lebih interaktif dan menarik. Selamat mencoba!

Rate This Article

Thanks for reading: Buat Pre Code Pakai Blockquete Di Blogger, Sorry, my English is bad:)