Sering ngerasa ribet kalau nulis artikel atau blog gara-gara hal teknis? Misalnya, lupa ngetik judul pakai awalan huruf besar, ragu panjang artikel udah cukup buat SEO atau belum, sampai pusing mau nampilin script code di postingan tapi malah error gara-gara dianggap coding oleh browser.
Tenang aja, lu nggak sendirian. Buat sesama penulis dan webmaster, di artikel ini gua udah nyediain tools mini yang siap pakai. Lu tinggal copy-paste teks lu ke dalam kotak di bawah ini, klik tombolnya, dan biarkan sistem yang ngerjain otomatis.
Berikut adalah 3 tools optimasi konten yang bisa lu gunakan langsung di halaman ini tanpa perlu menginstal aplikasi tambahan:
🔠 Case Converter
Mengubah teks menjadi HURUF KAPITAL, huruf kecil, atau Title Case secara otomatis.
📊 Word & Character Counter
Menghitung jumlah kata dan karakter untuk memastikan artikel memenuhi standar SEO atau panjang meta deskripsi.
Karakter: 0
Kata: 0
</> HTML Entity Converter
Mengubah karakter khusus (seperti < > &) menjadi kode entitas HTML agar bisa ditampilkan sebagai teks di dalam postingan tanpa dianggap kode oleh browser.
optimizer_tutorial.md
TUTORIAL: MEMBUAT CONTENT OPTIMIZER (VANILLA JS)
# Langkah 1: Struktur HTML (index.html)
// Pertama, kita buat struktur dasar untuk menampung input dan menampilkan hasil analisis.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alat Optimasi Konten - Vanilla JS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Content Optimizer (Vanilla JS)</h1>
<div class="main-layout">
<!-- Area Input -->
<div class="input-area">
<label for="contentInput">Masukkan Konten Anda:</label>
<textarea id="contentInput" placeholder="Mulai mengetik atau tempel konten di sini..."></textarea>
<div class="keyword-settings">
<label for="targetKeyword">Kata Kunci Utama:</label>
<input type="text" id="targetKeyword" placeholder="Misal: 'belajar JS'">
</div>
</div>
<!-- Area Dashboard Analisis -->
<div class="analysis-dashboard">
<div class="stat-card">
<h3>Ringkasan Dasar</h3>
<p>Kata: <span id="wordCount">0</span></p>
<p>Karakter: <span id="charCount">0</span></p>
<p>Waktu Baca: <span id="readingTime">0</span> mnt</p>
</div>
<div class="stat-card">
<h3>Keterbacaan</h3>
<p>Rata-rata Kata/Kalimat: <span id="avgWordsPerSentence">0</span></p>
<p id="readabilityStatus">Status: -</p>
</div>
<div class="stat-card">
<h3>Analisis Kata Kunci</h3>
<p>Kepadatan: <span id="keywordDensity">0</span>%</p>
<p>Jumlah Terdeteksi: <span id="keywordCount">0</span></p>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
# Langkah 2: Gaya CSS (style.css)
// Kita tambahin gaya sederhana supaya alat ini nyaman di pake nya.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
color: #333;
margin: 0;
padding: 20px;
}
.container { max-width: 1100px; margin: 0 auto; }
h1 { text-align: center; color: #2c3e50; }
.main-layout { display: flex; gap: 20px; margin-top: 20px; }
.input-area { flex: 2; display: flex; flex-direction: column; gap: 10px; }
textarea { width: 100%; height: 400px; padding: 15px; border: 1px solid #ccc; border-radius: 8px; resize: vertical; font-size: 16px; line-height: 1.6; }
.keyword-settings { display: flex; gap: 10px; align-items: center; background: #fff; padding: 10px; border-radius: 8px; border: 1px solid #eee; }
#targetKeyword { padding: 8px; border: 1px solid #ddd; border-radius: 4px; flex-grow: 1; }
.analysis-dashboard { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.stat-card { background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.stat-card h3 { margin-top: 0; border-bottom: 2px solid #3498db; padding-bottom: 5px; color: #2980b9; }
.stat-card p { margin: 8px 0; font-size: 15px; }
span { font-weight: bold; color: #2c3e50; }
# Langkah 3: Logika JavaScript (script.js)
// Ini adalah inti dari alat tersebut. Kita akan mendengarkan event input pada textarea dan menjalankan fungsi analisis setiap kali ada perubahan teks.
// Mengambil elemen DOM
const contentInput = document.getElementById('contentInput');
const targetKeywordInput = document.getElementById('targetKeyword');
const wordCountSpan = document.getElementById('wordCount');
const charCountSpan = document.getElementById('charCount');
const readingTimeSpan = document.getElementById('readingTime');
const avgWordsSpan = document.getElementById('avgWordsPerSentence');
const readabilityStatusSpan = document.getElementById('readabilityStatus');
const keywordDensitySpan = document.getElementById('keywordDensity');
const keywordCountSpan = document.getElementById('keywordCount');
// Fungsi utama analisis
function analyzeContent() {
const text = contentInput.value;
const targetKeyword = targetKeywordInput.value.trim().toLowerCase();
// 1. Hitung Karakter
const charCount = text.length;
charCountSpan.innerText = charCount;
// 2. Hitung Kata
const words = text.trim().split(/\s+/).filter(word => word.length > 0);
const wordCount = words.length;
wordCountSpan.innerText = wordCount;
// 3. Estimasi Waktu Membaca
const wordsPerMinute = 200;
const readingTime = Math.ceil(wordCount / wordsPerMinute);
readingTimeSpan.innerText = readingTime;
// 4. Analisis Keterbacaan Sederhana
const sentences = text.split(/[.!?]+\s/).filter(s => s.trim().length > 0);
const sentenceCount = sentences.length;
let avgWords = 0;
if (sentenceCount > 0 && wordCount > 0) {
avgWords = (wordCount / sentenceCount).toFixed(1);
}
avgWordsSpan.innerText = avgWords;
if (wordCount === 0) {
readabilityStatusSpan.innerText = "Status: -";
readabilityStatusSpan.style.color = "#333";
} else if (avgWords < 15) {
readabilityStatusSpan.innerText = "Status: Sangat Mudah";
readabilityStatusSpan.style.color = "#27ae60";
} else if (avgWords < 20) {
readabilityStatusSpan.innerText = "Status: Mudah";
readabilityStatusSpan.style.color = "#2ecc71";
} else if (avgWords < 25) {
readabilityStatusSpan.innerText = "Status: Sedang";
readabilityStatusSpan.style.color = "#e67e22";
} else {
readabilityStatusSpan.innerText = "Status: Sulit (Kalimat Terlalu Panjang)";
readabilityStatusSpan.style.color = "#c0392b";
}
// 5. Analisis Kata Kunci
if (targetKeyword && wordCount > 0) {
const escapedKeyword = targetKeyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(`\\b${escapedKeyword}\\b`, 'gi');
const matches = text.match(regex);
const count = matches ? matches.length : 0;
const density = ((count / wordCount) * 100).toFixed(2);
keywordCountSpan.innerText = count;
keywordDensitySpan.innerText = density;
} else {
keywordCountSpan.innerText = "0";
keywordDensitySpan.innerText = "0";
}
}
// Event Listeners
contentInput.addEventListener('input', analyzeContent);
targetKeywordInput.addEventListener('input', analyzeContent);
analyzeContent();
# Cara Menjalankan
- Buat folder baru di komputer lu.
- Simpan ketiga kode di atas jadiin index.html, style.css, dan script.js di dalam folder tersebut.
- Buka index.html pake browser web (Chrome, Firefox, Edge, dll.).
- Mulai dah mengetik di area teks, dan Lu bakalan melihat statistik di sebelah kanan diperbarui secara real-time.
# Pengembangan Lebih Lanjut (Ide untuk Penulis)
// Lu bisa kembangin alat Vanilla JS ini lebih jauh pake fitur:
- Pendeteksi Kalimat Pasif: Menggunakan daftar kata kerja pasif bahasa Indonesia.
- Pendeteksi Kata Keterangan berlebihan: Tandai kata kaya begini "sangat", "amat", "sekali".
- Penyimpanan Lokal (LocalStorage): supaya teks kagak hilang saat browser ditutup.