Blogspot'a daha önce kod eklediyseniz, <, >, & veya " gibi özel karakterlerin tarayıcı tarafından HTML kodu olarak yanlış anlaşılması nedeniyle "arayüz bozuk" hatasıyla karşılaşmış olmalısınız. Bunu düzeltmek için, kodu güvenli bir şekilde HTML Varlıklarına kodlamaya (kaçış) yardımcı olan küçük bir araç - Kod Kaçışı - yazdım. Onu yapıştırın ve işiniz bitsin.
 |
| Kod Kaçışı - Blogspot için HTML Öğelerini Kodlayın |
Bu araç şunları yapmanıza yardımcı olur:
- Kodu Blogspot'a eklerken biçimini koruyun Gönderiler.
- Özel karakterleri otomatik olarak karşılık gelen öğelerle değiştirin.
- Karanlık modu destekler, her iki arayüzde de güzel görünür.
- Kompakt arayüz, bağımsız çalışır, blogun genel stilini etkilemez.
💡 Örnekleyici
Şu koda sahip olduğunuzu varsayalım:
<div class="card">Merhaba dünya!</div>
Araca yapıştırıldığında sonuç şu olacaktır:
<div class="card">Merhaba dünya!</div>
Artık bu kodu Blogspot gönderinize korkmadan yapıştırabilirsiniz. görüntüleme hataları.
🧱 Tam kaynak kodu
Aşağıda, Blogspot'ta veya HTML'yi destekleyen herhangi bir yerde kendi sayfanıza (Sayfa) ekleyebileceğiniz tüm HTML kodu bulunmaktadır:
<!-- ========== KOD KAÇIŞ (Blogspot Sayfası) ========== -->
<section id="atn-escaper" aria-labelledby="escaper-title">
<style>
#atn-escaper {
--bg: #f7fafc;
--card: #ffffff;
--text: #111827;
--muted: #6b7280;
--brand: #2563eb;
--brand-2: #22c55e;
--border: rgba(148,163,184,.35);
--shadow: 0 10px 30px rgba(2,6,23,.08);
--radius: 14px;
color: var(--text);
font: 16px/1.6 system-ui, -apple-system, Segoe Kullanıcı Arayüzü, Roboto, Helvetica, Arial, "Apple Color Emojisi", "Segoe Kullanıcı Arayüzü Emojisi";
arka plan: var(--bg);
dolgu: 24px 0;
}
@media (tercih edilen renk şeması: koyu) {
#atn-escaper {
--bg: #0b1220;
--kart: #0f172a;
--metin: #e5e7eb;
--sessiz: #9ca3af;
--marka: #60a5fa;
--marka-2: #34d399;
--sınır: rgba(148,163,184,.25);
--gölge: 0 10px 30px rgba(0,0,0,.35);
}
}
#atn-escaper .container { maksimum genişlik: 960px; kenar boşluğu: 0 otomatik; dolgu: 0 16px; }
#atn-escaper .hero {
metin hizalaması: merkez; alt kenar boşluğu: 18px; konum: göreceli; dolgu: 8px 0 0;
}
#atn-escaper h1#escaper-title {
kenar boşluğu: 0; yazı tipi boyutu: clamp(26px, 4vw, 40px); harf aralığı: -.02em;
}
#atn-escaper .subtitle { renk: var(--muted); üst kenar boşluğu: 8px; yazı tipi boyutu: 15px; }
#atn-escaper .grid {
görüntüleme: ızgara; boşluk: 14px;
grid-şablon-sütunları: 1fr;
}
@media (min-genişlik: 900px) {
#atn-escaper .grid { ızgara-şablon-sütunları: 1fr 1fr; }
}
#atn-escaper .kartı {
arka plan:var(--card); kenarlık: 1px solid var(--border);
kenarlık yarıçapı: var(--radius); kutu gölgesi: var(--shadow);
dolgu: 14px;
}
#atn-escaper .card h2 {
görüntüleme: esnek; öğeleri hizala: merkez; boşluk: 10px; kenar boşluğu: 0 0 8px;
yazı tipi boyutu: 16px; harf aralığı: -.01em;
}
#atn-escaper .card h2 .dot {
genişlik: 10px; yükseklik: 10px; kenarlık yarıçapı: 999px; arka plan: var(--brand);
kutu gölgesi: 0 0 0 6px rgba(37,99,235,.14);
}
#atn-escaper .toolbar {
görüntüleme: esnek; flex-wrap: sarma; boşluk: 8px; kenar boşluğu: 8px 0 10px;
}
#atn-escaper .btn {
görüntüle: satır içi-esnek; öğeleri hizala: merkez; boşluk: 8px; imleç: işaretçi;
kenarlık: 1px solid var(--border); kenarlık yarıçapı: 10px;
arka plan: doğrusal-gradyan(180 derece, rgba(255,255,255,.08), rgba(0,0,0,.02));
dolgu: 8px 12px; yazı tipi boyutu: 14px; renk: var(--text); metin süslemesi: yok;
geçiş: dönüşüm .12sn, kutu gölgesi .12sn, kenarlık rengi .12sn;
}
#atn-escaper .btn:hover { dönüşüm: translateY(-1px); kenarlık rengi: var(--brand); kutu gölgesi: var(--shadow); }
#atn-escaper .btn.primary { kenarlık rengi: var(--brand); }
#atn-escaper .btn.success { kenarlık rengi: var(--brand-2); }
#atn-escaper .stats {
sol kenar boşluğu: otomatik; renk: var(--muted); yazı tipi boyutu: 13 piksel;
görüntüleme: satır içi esnek; boşluk: 10 piksel; öğeleri hizala: ortala;
}
#atn-escaper metin alanı, #atn-escaper giriş[tür="metin"] {
genişlik: %100; min. yükseklik: 240 piksel; yeniden boyutlandırma: dikey;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 14px; line-height: 1.5; color: var(--text);
background: #0b122003;
border: 1px solid var(--border); border-radius: 10px; padding: 12px;
outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
#atn-escaper textarea:focus {
border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.2);
background: #0b122006;
}
#atn-escaper .hint { kenar boşluğu üst: 8 piksel; yazı tipi boyutu: 13 piksel; renk: var(--muted); }
#atn-escaper .note {
kenar boşluğu üst: 14 piksel; metin hizalaması orta; renk: var(--muted); yazı tipi boyutu: 13 piksel;
}
#atn-escaper .rozet {
görüntüleme: satır içi esnek; boşluk: 8 piksel; öğeleri hizalama: orta; dolgu: 8 piksel 12 piksel;
kenarlık: 1 piksel düz var(--border); kenarlık yarıçapı: 999 piksel; arka plan: var(--kart); kenar boşluğu üst: 10 piksel;
}
#atn-escaper .toast {
konum: sabit; sol: %50; dönüşüm: translateX(-50%);
alt: 24 piksel; arka plan: var(--kart); renk: var(--text);
kenarlık: 1px solid var(--border); kutu gölgesi: var(--shadow); kenarlık yarıçapı: 10px;
dolgu: 10px 14px; yazı tipi boyutu: 14px; görüntüleme: yok; z-indeksi: 9999;
}
#atn-escaper .line {
kenar boşluğu: 14px 0; yükseklik: 1px; arka plan: doğrusal-gradyan(90 derece, şeffaf, var(--border), şeffaf);
}
</style>
<div class="container">
<header class="hero">
<h1 id="escaper-title">Benim Kodum → HTML Varlıkları</h1>
<p class="subtitle">Bu kod gerçekten de çok önemli, bu da bir sorun değil. Hỗ trợ <code>& < > " '</code>.</p>
<div class="badge" aria-live="polite">🔐 Bana bir şans verin • Karanlık mod devre dışı</div>
</header>
<div class="grid" role="group" aria-label="Girdi">
<!-- GİRİŞ -->
<article class="card" aria-labelledby="input-title">
<h2 id="input-title"><span class="dot" aria-hidden="true"></span>Çık vào</h2>
<div class="toolbar">
<button class="btn" type="button" id="btn-clear">🧹 Merhaba</button>
<button class="btn" type="button" id="btn-paste">📋 Ve</button>
<span class="stats" id="stats-in">0 kişi · 0 kişi</span>
</div>
<label for="esc-input" class="sr-only">Bu kodun anlamı</label>
<textarea id="esc-input" placeholder="Bu kod şu şekildedir:"></textarea>
<p class="hint">Önemli: Bu, HTML/JS/CSS'de geçerli bir işlemdir. Bu, HTML varlıkları ile ilgili daha fazla bilgi içerir.</p>
</article>
<!-- ÇIKIŞ -->
<article class = "kart" aria-labelledby = "output-title" >
<h2 id="output-title"><span class="nokta" aria-gizli="true" style="arkaplan: var(--brand-2); box-shadow: 0 0 0 6px rgba(34,197,94,.14)"></span>Gösterilen öğenin adı</h2>
<div class="toolbar">
<button class="btn primary" type="button" id="btn-copy">📑 Copy</button>
<button class="btn success" type="button" id="btn-select">🔍 Kopyala</button>
<span class="stats" id="stats-out">0 kişi · 0 dòng</span>
</div>
<label for = "esc-output" class = "sr-only">
<textarea id="esc-output"readonly aria-readonly="true" placeholder="Sonuçlar burada görünecek…"></textarea>
<p class="hint">Kodlanmış karakterler: <code>&</code>, <code>></code>, <code>></code>, <code>"</code>, <code>'</code>.</p>
</article>
</div>
<div class="line" role="separator" aria-hidden="true"></div>
<p class="note">⚡ Bu araç seti sayfasının CSS'si yerel olarak <code>#atn-escaper</code> dilinde yazılmıştır ve blogun genel görünümünü etkilemez.</p>
</div>
<div class="toast" id="esc-toast" role="status" aria-live="polite"></div>
<script>
(function () {
// ===== Yardımcı Programlar
const $ = (sel, scope=document) => scope.querySelector(sel);
const $$ = (sel, scope=document) => Array.from(scope.querySelectorAll(sel));
const inEl = $('#esc-input');
const outEl = $('#esc-output');
const toast = $('#esc-toast');
// Güvenli sırada kaçış: & önce, sonra < > " '
function escapeEntities(text) {
if (text == null) return '';
return text
.replaceAll(/&/g, '&')
.replaceAll(/</g, '<')
.replaceAll(/>/g, '>')
.replaceAll(/"/g, '"')
.replaceAll(/'/g, ''');
}
// Daha düzgün olması için girdiyi geri tepme
function debounce(fn, delay) {
let t;
return function (...args) {
clearTimeout(t);
t = setTimeout(() => fn.apply(this, args), delay);
}
}
function updateStats(el, statsEl) {
const val = el.value || '';
const chars = val.length;
// Satırları hesapla: \n ile ayır, boşsa 0
const lines = val ? (val.match(/\n/g)?.length || 0) + 1 : 0;
statsEl.textContent = `${chars} karakter | ${lines} satır`;
}
// Oluştur
const render = debounce(() => {
const src = inEl.value || '';
const esc = escapeEntities(src);
outEl.value = esc;
updateStats(inEl, $('#stats-in'));
updateStats(outEl, $('#stats-out'));
}, 80);
// Kopyala ve Seç
function showToast(msg) {
toast.textContent = msg;
toast.style.display = 'block';
clearTimeout(showToast._t);
showToast._t = setTimeout(() => { toast.style.display = 'none'; }, 1400);
}
$('#btn-copy').addEventListener('click', async () => {
try.try {
outEl.select();
document.execCommand('copy');
// Pano API'si için izin varsa:
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(outEl.value);
}
showToast('Sonuçlar panoya kopyalandı ✅');
} catch (e) {
showToast('Kopyalanamıyor, lütfen manuel olarak seçip kopyalayın.');
}
});
$('#btn-select').addEventListener('click', () => {
outEl.focus();
outEl.select();
showToast('Tüm sonuçlar seçili.');
});
$('#btn-clear').addEventListener('click', () => {
inEl.value = '';
render();
inEl.focus();
});
$('#btn-paste').addEventListener('click', async () => {
try {
if (navigator.clipboard && window.isSecureContext) {
const text = await navigator.clipboard.readText();
if (text) {
inEl.value = text;
render();
showToast('Metin panodan yapıştırıldı.');
} else {
showToast('Pano boş.');
}
} else {
showToast('Tarayıcı otomatik yapıştırmayı desteklemiyor.');
}
} catch (e) {
showToast('Pano değil erişilebilir.');
}
});
// Giriş olayı
inEl.addEventListener('input', render);
// Başlatma
render();
// Küçük erişilebilirlik: Hızlı kopyalama için Ctrl/Cmd + Enter
document.addEventListener('keydown', (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
$('#btn-copy').click();
}
});
})();
</script>
</section>
<!-- ========== /KOD KAÇIŞ TUŞU ========== -->
Not: Bu aracın CSS'si yerel olarak öğesinde
#atn-escaper yazılmıştır, bu nedenle blogun mevcut arayüzünü veya temasını etkilemeyecektir.
⚙️ Önbellek
- HTML, CSS ve JavaScript kodları ve daha fazla kodlayın.
- Bundan sonra daha iyi bir şey yaptım.
- Yeni 📑 Kopyala Blogspot'u ziyaret ettim.
- Panoya kopyalayıp 📋 Panoya kopyalamak için Ctrl + Enter tuşlarına basın.
🌙 Bir şey olmadı
- Geçmişte, Karanlık mod eklendi.
- Nút Yapıştır, Temizle, Tümünü Seç, Kopyala.
- Bu çok güzel ve çok daha fazlası.
- Tost (kızarmış ekmek) kopyala, yapıştır ve yapıştır.
- Sunucuda JavaScript'i kullanarak yeni bir yöntem kullanabilirsiniz.
🪄Kết luận
Nếu bạn Blogspot'ta yeni bir kod var ve Code Escaper'da bir tane daha var. bu çok iyi ve çok şey oldu. Bir de şu yazı tipi var, dosyanın üzerinde bir şey yok.
📎 Tác giả & Teşekkürler
- 👨💻 Tac giả: Anh Trai Nắng Blogger
- 📅 Güncelleme: v1.0
- 🏷️ Çok teşekkür ederim – çok uzun süre kredi kullandım.
