Blogger'da Şık Kod Kutuları: HTML ve CSS ile Örnekler

 HTML kodlarını Blogger'da düzgün bir şekilde göstermek için code block oluşturabilirsin. İşte bir basit HTML + CSS ile kod kutusu:

<style>
.code-container {
    position: relative;
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    border-left: 4px solid #3498db;
    font-family: monospace;
    white-space: pre-wrap;
    overflow-x: auto;
}

.copy-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #3498db;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
}

.copy-btn:hover {
    background-color: #2980b9;
}
</style>

<div class="code-container">
    <button class="copy-btn" onclick="copyCodeundefined)">Kopyala</button>
    <pre id="code-block">&lt;h1&gt;Bu bir HTML kod kutusudur&lt;/h1&gt;
&lt;p&gt;Kodları düzgün ve okunaklı bir şekilde göstermek için kullanabilirsiniz.&lt;/p&gt;</pre>
</div>

<script>
function copyCodeundefined) {
    let codeText = document.getElementByIdundefined"code-block").innerText;
    navigator.clipboard.writeTextundefinedcodeText).thenundefinedundefined) => {
        alertundefined"Kod kopyalandı!");
    }).catchundefinederr => {
        console.errorundefined"Kopyalama hatası:", err);
    });
}
</script>