صندوق عرض الاكواد

  
<!-- JavaScript untuk Tombol Salin -->
<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('.code-container').forEach((container) => {
      const button = container.querySelector('.copy-button');
      const code = container.querySelector('pre code').innerText;

      button.addEventListener('click', () => {
        navigator.clipboard.writeText(code).then(() => {
          button.innerText = 'Copied!';
          setTimeout(() => {
            button.innerText = 'Copy';
          }, 2000);
        });
      });
    });
  });
</script>

 تحديل الكل

  
/* ------------------------------
 * شريط الاخبار
 * ------------------------------ */
#MD-tekstugasku4u{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJpbi8_JxoNCWcFwlI52M-YsSuZ8oa5OpyAhmxvrIFhS4XwEcWPAWgToTOr6x12gwrQpPN9f5DFruxhSXU2G6pSE64PJrjSOTJgKbxatZlXNbBcUaaRLyla38EjukPw-QvmKUc29t7U0/s1600/Tugasku4u-sticky.png') repeat;color:#5FF0BD;width:100%;height:150px;bottom:0;text-align:center;margin:0 auto;padding:0;border-top-left-radius:10px;border-top-right-radius:10px; -moz-box-shadow:0 0 10px 2px #888;-webkit-box-shadow:0 0 10px 2px #888;box-shadow:0 0 10px 2px #888;height:28px;position:fixed;line-height:1.85em;vertical-align:baseline;letter-spacing:1px}
#MD-tekstugasku4u{font: bold 13px/30px Calibri;}
#MD-tekstugasku4u a{color:#00ABFF;text-decoration:none}
#MD-tekstugasku4u a:hover{color:#60CBFF;}
#MD-tekstugasku4u a:visited{color:#6A6A6A;}
::-webkit-scrollbar {width: 15px; background: #CCCCCC; -moz-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {background-color: #252525; -moz-border-radius: 10px; border-radius: 10px;}


  

صندوق الاكواد العرض

  
<style>
.code-container {
  position: relative;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 10px;
  margin: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #eaeaea;
}

.code-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-family: system-ui;
  font-weight: 700;
  color: #333;
}

.copy-button {
  background-color: transparent;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  cursor: pointer;
  padding: 5px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  display: flex;
  align-items: center;
}

.copy-button:hover {
  background-color: #f9f9f9;
  border-color: #ccc;
}

.copy-button.copied {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
}

.copy-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.code-block {
  padding: 10px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #333;
  overflow-x: auto;
  margin-top: 10px;
}

.new-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 12px 20px;
  font-size: 1rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s 0.5s;
  z-index: 9999;
}

.new-toast.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
}

.new-toast.success {
  background-color: #28a745;
}

.new-toast.error {
  background-color: #dc3545;
}

.new-toast.info {
  background-color: #17a2b8;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const copyButtons = document.querySelectorAll('.copy-button');
  
  copyButtons.forEach(button => {
    button.addEventListener('click', function () {
      const targetId = button.getAttribute('data-target');
      copyCode(targetId, button);
    });
  });
});

function copyCode(contentId, button) {
  const content = document.getElementById(contentId);
  const range = document.createRange();
  const selection = window.getSelection();

  selection.removeAllRanges();
  range.selectNodeContents(content);
  selection.addRange(range);

  try {
    document.execCommand("copy");
    showToast("Code copied to clipboard!", "success");
    button.classList.add("copied");
  } catch (err) {
    console.error("Failed to copy", err);
    showToast("Failed to copy the code!", "error");
  }

  selection.removeAllRanges();
  setTimeout(() => button.classList.remove("copied"), 2000);
}

function showToast(message, type = "info") {
  const toast = document.getElementById("new-toast");
  toast.textContent = message;
  toast.classList.add("show", type);

  setTimeout(() => toast.classList.remove("show", type), 3000);
}

</script>

  

صندوق عرض الاكواد

  
<!-- JavaScript untuk Tombol Salin -->
<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('.code-container').forEach((container) => {
      const button = container.querySelector('.copy-button');
      const code = container.querySelector('pre code').innerText;

      button.addEventListener('click', () => {
        navigator.clipboard.writeText(code).then(() => {
          button.innerText = 'Copied!';
          setTimeout(() => {
            button.innerText = 'Copy';
          }, 2000);
        });
      });
    });
  });
</script>