Cara Membuat Tool Code Separator di Blogger – Bagi pengguna blogger.com ketika ingin membuat fitur tertentu atau memodifikasi tampilan tema harus melakukan pengeditan struktur kode HTMLL, CSS dan JavaScript yang digunakan.
Sayangnya di blogger.com susunan kode tersebut tidak disimpan secara terpisah misal :
- file.html
- file.css
- file.js
Melainkan disusun secara langsung dengan bentuk kurang lebih seperti ini :
<div>
<blockquote><p><title>Code Separator Tool</title>k#code-separator-tool{font-family:Arial, sans-serif;background-color:#f0f2f5;display:flex;justify-content:center;padding:20px}#code-separator-tool .tool-container{background-color:#ffffff;border-radius:10px;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);padding:20px;max-width:800px;width:100%}#code-separator-tool textarea{width:100%;height:150px;padding:10px;margin-bottom:10px;border:1px solid #ccc;border-radius:5px;resize:none}#code-separator-tool .button-group{display:flex;gap:10px;justify-content:center;margin-bottom:20px}#code-separator-tool button{padding:10px 20px;border:none;background-color:#1976D2;color:#fff;border-radius:5px;cursor:pointer;transition:background-color 0.3s}#code-separator-tool button:hover{background-color:#145CA5}#code-separator-tool .result-container{margin-top:20px}#code-separator-tool .result-section{margin-bottom:20px}#code-separator-tool .result-section h3{margin-bottom:5px}#code-separator-tool .copy-btn{margin-top:5px;padding:5px 10px;background-color:#4CAF50;color:#fff;border-radius:3px;cursor:pointer}#code-separator-tool .copy-btn:hover{background-color:#388E3C}<div id="code-separator-tool"><div class="tool-container"><h2>Code Separator Tool</h2><textarea id="inputCode" placeholder="Paste your code here..."></textarea><div class="button-group"><button id="separateCodeBtn">Pisahkan Kode</button><button id="clearCodeBtn">Hapus Kode</button></div><div class="result-container"><div class="result-section"><h3>HTML Code</h3><textarea id="htmlOutput" readonly=""></textarea><button class="copy-btn" onclick="copyToClipboard('htmlOutput')">Salin HTML</button></div><div class="result-section"><h3>CSS Code</h3><textarea id="cssOutput" readonly=""></textarea><button class="copy-btn" onclick="copyToClipboard('cssOutput')">Salin CSS</button></div><div class="result-section"><h3>JS Code</h3><textarea id="jsOutput" readonly=""></textarea><button class="copy-btn" onclick="copyToClipboard('jsOutput')">Salin JS</button></div></div></div></div>document.getElementById('separateCodeBtn').addEventListener('click',()=>{const inputCode=document.getElementById('inputCode').value;let htmlCode='';let cssCode='';let jsCode='';const cssRegex=/<style[^>]*>([sS]*?)</style>/gi;const jsRegex=/]*>([sS]*?)</script>/gi;htmlCode=inputCode.replace(cssRegex,'').replace(jsRegex,'').trim();cssCode=(inputCode.match(cssRegex)|| []).map(tag=> tag.replace(/</?style[^>]*>/gi,'')).join('n').trim();jsCode=(inputCode.match(jsRegex)|| []).map(tag=> tag.replace(/</?script[^>]*>/gi,'')).join('n').trim();document.getElementById('htmlOutput').value=htmlCode;document.getElementById('cssOutput').value=cssCode;document.getElementById('jsOutput').value=jsCode});document.getElementById('clearCodeBtn').addEventListener('click',()=>{document.getElementById('inputCode').value='';document.getElementById('htmlOutput').value='';document.getElementById('cssOutput').value='';document.getElementById('jsOutput').value=''});function copyToClipboard(elementId){const textarea=document.getElementById(elementId);textarea.select();textarea.setSelectionRange(0,99999);</p></blockquote>
</div>Dalam kesempatan tertentu mungkin kalian ingin memisahkan susunan kode tersebut, namun bingung mana saja yang termasuk HTML, mana yang termasuk CSS dan mana yang JavaScript.
Apalagi jika kalian masih pemula yang baru belajar coding dasar, sehingga khawatir akan salah dalam memisahkan kode-kode tersebut.
Namun tidak perlu khawatir, karena kalian bisa menggunakan Tool Code Separator untuk secara otomatis memisahkan kode dan mengelompokkannya khusus HTML, CSS dan JavaScript.
Cara Buat Tool Code Separator Blogger
Bagi kalian yang masih pemula, tidak perlu bingung lagi untuk bagaimana cara memisahakan HTML, CSS dan JavaScript. Karena ONLEN.ID sudah membuatkan Tool Code Separator yang dapat kalian gunakan di blogger.com.
Berikut ini Tutorial Membuat Tool Code Separator di Blogger dengan Mudah :
- Buka Blogger.com
- Sign In dengan Akun kalian
- Buat Halaman Baru
- Beri Judul “Tool Code Separator” atau “Code Separator”
- Lalu ubah mode penulisan menjadi Tampilan HTML, seperti pada gambar berikut ini :
- Setelah itu Masukkan Script Kode di bawah ini :
a. HTML
<title>Code Separator Tool</title>
<-- CSS Masukkan di Sini -->
<div id="code-separator-tool">
<div class="tool-container">
<h2>Code Separator Tool</h2>
<textarea id="inputCode" placeholder="Paste your code here..."></textarea>
<div class="button-group">
<button id="separateCodeBtn">Pisahkan Kode</button>
<button id="clearCodeBtn">Hapus Kode</button>
</div>
<div class="result-container">
<div class="result-section">
<h3>HTML Code</h3>
<textarea id="htmlOutput" readonly=""></textarea>
<button class="copy-btn" onclick="copyToClipboard('htmlOutput')">Salin HTML</button>
</div>
<div class="result-section">
<h3>CSS Code</h3>
<textarea id="cssOutput" readonly=""></textarea>
<button class="copy-btn" onclick="copyToClipboard('cssOutput')">Salin CSS</button>
</div>
<div class="result-section">
<h3>JS Code</h3>
<textarea id="jsOutput" readonly=""></textarea>
<button class="copy-btn" onclick="copyToClipboard('jsOutput')">Salin JS</button>
</div>
</div>
</div>
</div>b. CSS
k#code-separator-tool {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
padding: 20px;
}
#code-separator-tool .tool-container {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 800px;
width: 100%;
}
#code-separator-tool textarea {
width: 100%;
height: 150px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
}
#code-separator-tool .button-group {
display: flex;
gap: 10px;
justify-content: center;
margin-bottom: 20px;
}
#code-separator-tool button {
padding: 10px 20px;
border: none;
background-color: #1976D2;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
#code-separator-tool button:hover {
background-color: #145CA5;
}
#code-separator-tool .result-container {
margin-top: 20px;
}
#code-separator-tool .result-section {
margin-bottom: 20px;
}
#code-separator-tool .result-section h3 {
margin-bottom: 5px;
}
#code-separator-tool .copy-btn {
margin-top: 5px;
padding: 5px 10px;
background-color: #4CAF50;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
#code-separator-tool .copy-btn:hover {
background-color: #388E3C;
}C. JavaScript
document.getElementById('separateCodeBtn').addEventListener('click', () => {
const inputCode = document.getElementById('inputCode').value;
let htmlCode = '';
let cssCode = '';
let jsCode = '';
const cssRegex = /<style[^>]*>([sS]*?)</style>/gi;
const jsRegex = /]*>([sS]*?)</script>/gi;
htmlCode = inputCode.replace(cssRegex, '').replace(jsRegex, '').trim();
cssCode = (inputCode.match(cssRegex) || []).map(tag => tag.replace(/</?style[^>]*>/gi, '')).join('n').trim();
jsCode = (inputCode.match(jsRegex) || []).map(tag => tag.replace(/</?script[^>]*>/gi, '')).join('n').trim();
document.getElementById('htmlOutput').value = htmlCode;
document.getElementById('cssOutput').value = cssCode;
document.getElementById('jsOutput').value = jsCode;
});
document.getElementById('clearCodeBtn').addEventListener('click', () => {
document.getElementById('inputCode').value = '';
document.getElementById('htmlOutput').value = '';
document.getElementById('cssOutput').value = '';
document.getElementById('jsOutput').value = '';
});
function copyToClipboard(elementId) {
const textarea = document.getElementById(elementId);
textarea.select();
textarea.setSelectionRange(0, 99999); // For mobile devices
document.execCommand('copy');
alert('Copied to clipboard: ' + elementId);
}- Setelah itu Klik Publikasikan
Jika kalian kesulitan menyalin script di atas, kalian juga bisa mengakses Script Tool Code Separator Blogger dari GitHub ONLEN.ID di sini => https://github.com/onlendotid/tool-code-separator-blogger
Pengujian Tool Code Seperator Blogger
Jika kalian sudah mempublikasikan halaman tool code separator blogger yang dibuat tadi, jangan lupa melakukan testing untuk mengetahui apakah tool sudah benar-benar bekerja atau belum.
Pertama buka halaman tool yang sudah terpublish, contohnya milik ONLEN.ID ada di sini => https://www.onlen.id/p/code-separator.html
a. Kolom Tool Code Separator
Di dalam tools ini ada 4 Kolom antara lain :
- Kolom Input : Berada di bagian paling atas, kolom ini berfungsi untuk memasukkan susunan script code yang ingin kalian pisahakan
- Kolom HTML : Ini merupakan kolom output yang akan menampilkan output berupa kode HTML dari susunan script code yang sudah dimasukkan ke kolom input
- Kolom CSS : Ini merupakan kolom output yang akan menampilkan output berupa kode CSS dari susunan script code yang sudah dimasukkan ke kolom input
- Kolom JavaScript : Ini merupakan kolom output yang akan menampilkan output berupa kode JavaScript dari susunan script code yang sudah dimasukkan ke kolom input
b. Tombol Tool Code Separator
Di dalam tools ini ada 3 Tombol antara lain :
- Pisahkan Kode : Di bawah kolom input ada tombol Pisahkan Kode yang berfungsi untuk memproses pemisahan kode HTML, CSS dan JS.
- Hapus Kode : Di bawah kolom input ada tombol Hapus Kode yang berfungsu untuk mereset tool dengan menghapus seluruh kode yang sedang diproses di tools tersebut.
- Salin Kode : Di bawah tiap kolom output (HTML, CSS dan JS) masing-masing terdapat tombol Salin Kode yang berfungsi untuk menyalin kode sesuai output yang dipilih.
Penutup
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.
