Cara Membuat Tool Text to HTML di Blogger

Cara Membuat Tool Text to HTML di Blogger – Sebagai pengguna platform blogger, kalian pasti sering dihadapkan dengan HTML, karena HTML sudah menjadi struktur utama dalam struktur kode tema blogger.com.

Dalam beberapa kasus, kalian biasanya perlu mengubah teks menjadi html untuk keperluan tertentu, seperti mengisi menu di header, mengisi menu khusus di footer dan berbagai kebutuhan lainnya.

Yang membuat kalian perlu merubah teks biasa seperti ini “CONTOH TEKS BIASA” diubah menjadi HTML seperti ini “<b>CONTOH</b> <i>TEKS</i> <u>BIASA</u>” dan sejenisnya.

Cara Buat Tool Text to HTML Blogger

Jika kalian masih pemula pasti merasa bingung dan direpotkan akan hal tersebut, oleh karen itu ONLEN.ID sudah membuatkan tool Text To HTML yang bisa mempermudah kalian, berikut ini tutorial membuat tool text to html di blogger :

• Buka Blogger.com
• Sign In dengan akun kalian
• Buka menu Halaman di Dashboard Blogger
• Buat Halaman Baru dan beri judul “Tool Text to HTML” atau “Text to HTML”
• Setelah itu ubah mode penulisan menjadi “Tampilan HTML” seperti pada gambar berikut ini :

Setelah itu masukkan script berikut ini :

a. HTML

<div id="html-generator-tool">
  <h2>Text to HTML Converter</h2>
  <textarea id="plainTextInput"></textarea>
  
  <div class="button-group">
    <button onclick="convertToHTML()">Convert to HTML</button>
    <button onclick="clearFields()">Clear</button>
  </div>
  
  <h3>Output HTML:</h3>
  <div id="outputHTML"></div>
  
  <button class="copy-button" onclick="copyToClipboard()">Copy to Clipboard</button>
</div>

b. CSS

#html-generator-tool {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
    background-color: #f4f4f4;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
  }

  #html-generator-tool h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
  }

  #html-generator-tool textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    resize: vertical;
    height: 150px;
    margin-bottom: 15px;
  }

  .button-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
  }

  #html-generator-tool button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }

  #html-generator-tool button:hover {
    background-color: #45a049;
  }

  #outputHTML {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    background-color: #fff;
    font-family: 'Courier New', monospace;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 10px;
  }

  .copy-button {
    display: block;
    margin: 0 auto;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }

  .copy-button:hover {
    background-color: #0056b3;
  }

c. JavaScript

function convertToHTML() {
    const plainTextInput = document.getElementById('plainTextInput').value;
    const outputHTML = document.getElementById('outputHTML');

    // Pisahkan teks input per baris dan bungkus dengan <p>...</p>
    const htmlContent = plainTextInput
      .split('n')
      .filter(line => line.trim() !== '') // Hapus baris kosong
      .map(line => `<p>${line}</p>`)
      .join('</br>');

    outputHTML.textContent = htmlContent; // Menampilkan sebagai teks yang dapat disalin
  }

  function clearFields() {
    document.getElementById('plainTextInput').value = '';
    document.getElementById('outputHTML').textContent = '';
  }

  function copyToClipboard() {
    const outputHTML = document.getElementById('outputHTML').textContent;
    navigator.clipboard.writeText(outputHTML).then(() => {
      alert('HTML content copied to clipboard!');
    }).catch(err => {
      console.error('Error copying text: ', err);
    });
  }

• Jika sudah silahkan Save dengan cara klik Publish/Publikasikan

Jika kalian kesulitan untuk mengcopy script di atas, kalian juga dapat menyalinnya dengan mengakses halaman GitHub ONLEN.ID di sini => https://github.com/onlendotid/tool-text-to-html-blogger

Pengujian Tool Text to HTML Blogger

Jika kalian sudah selesai mempublikasikan halaman tool text to html blogger, jangan lupa melakukan pengujian, untuk memastikan apakah tool sudah dapat berfungsi dengan benar.

Pertama buka halaman tool tersebut, contohnya milik ONLEN.ID ada di sini => https://www.onlen.id/p/text-to-html-converter.html

Di dalam tools ini ada beberapa fitur antara lain :

• Kolom Input : Berfungsi untuk memasukkan text yang akan kalian ubah menjadi HTML
• Tombol Convert to HTML : Berfungsi untuk menjalankan/memproses perubahan text menjadi HTML
• Tombol Clear : Berfungsi untuk menghapus seluruh isi yang ada di kolom input dan output
• Kolom Output : Berfungsi untuk menampilkan hasil proses convert Text menjadi HTML
• Tombol Copy to Clipboard : Berfungsi unutk menyalin proses dari yang ditampilkan di kolom output

Contoh, jika tools berhasil merubah text yang seperti ini :

CONTOH TEXT

Menjadi bentuk seperti ini :

<a>CONOTH TEXT</a>

Maka tool text to html blogger sudah benar-benar berfungsi, jika kalian kurang puas.. kalian bisa mencoba memodifikasinya dengan menambahkan fitur-fitur yang kalian inginkan.

Namun sebelum memastikan hal tersebut, pastikan kalian sudah cukup memahami HTML, CSS dan JavaScript dasar.

Penutup

Itulah tutorial membuat alat covert teks menjadi HTML di Blogger, semoga dapat membantu kalian dalam mengembangkan situs web berbasi blogger.com.

Tool ini bisa digunakan oleh siapapun tidak terbatas hanya untuk pelanggan Jasa Pembuatan Website Murah dari ONLEN.ID, siapapun yang menggunakan platform blogger.com boleh menggunakan tools ini di situs kalian.