تركيب ميزة الأقباسات الصغيرة مع زرالنسخ لقالب بلوجر

<style>

.strike-container{display:inline-flex;align-items:center;border:1px solid #007eff6b;border-radius:4px;padding:2px 4px;margin:0 4px;position:relative}

.copy-strike-btn{padding:2px 8px;background-color:#444;color:#fff;border:1px solid transparent;margin:2px 4px 2px 4px;line-height:15px;border-radius:3px;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;transition:all 0.3s;position:relative}

strike{text-decoration:none!important}

.copy-strike-btn:hover{background-color:#5a5a5a}

.copy-strike-btn .tooltip-text{visibility:hidden;width:80px;background-color:#555;color:#fff;text-align:center;border-radius:4px;padding:5px;position:absolute;z-index:1000;bottom:100%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.3s;font-size:12px;margin-bottom:5px;white-space:nowrap}

.copy-strike-btn .tooltip-text.show{visibility:visible;opacity:1}

.strike-copied{background-color:rgba(0,126,255,0.2);animation:fadeOutHighlight 2s forwards;border-radius:3px}

@keyframes fadeOutHighlight{from{background-color:rgba(0,126,255,0.2)}to{background-color:transparent}}

</style>

<script type='text/javascript'>

//<![CDATA[

document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.post-body strike').forEach(function(strikeEl){if (strikeEl.closest('.strike-container')) return;const container = document.createElement('div');container.className = 'strike-container';strikeEl.parentNode.insertBefore(container,strikeEl);container.appendChild(strikeEl);const copyBtn = document.createElement('button');copyBtn.className = 'copy-strike-btn';copyBtn.innerHTML = ` <span class="bi bi-copy"></span> <span class="tooltip-text">نسخ الكــود</span> `;container.insertBefore(copyBtn,strikeEl);copyBtn.addEventListener('click',function(e){e.stopPropagation();const textToCopy = strikeEl.innerText.trim();const tooltip = copyBtn.querySelector('.tooltip-text');tooltip.classList.add('show');tooltip.textContent = 'جاري النسخ...';navigator.clipboard.writeText(textToCopy).then(function(){strikeEl.classList.add('strike-copied');copyBtn.innerHTML = ` <span class="bi bi-check2"></span> <span class="tooltip-text show">تم النسخ</span> `;setTimeout(function(){copyBtn.innerHTML = ` <span class="bi bi-copy"></span> <span class="tooltip-text">نسخ النص</span> `;strikeEl.classList.remove('strike-copied');},2000);}).catch(function(err){console.error('فشل في نسخ النص: ',err);copyBtn.innerHTML = ` <span class="bi bi-x-circle"></span> <span class="tooltip-text show">خطأ في النسخ</span> `;setTimeout(function(){copyBtn.innerHTML = ` <span class="bi bi-copy"></span> <span class="tooltip-text">نسخ النص</span> `;},2000);});});copyBtn.addEventListener('mouseenter',function(){const tooltip = this.querySelector('.tooltip-text');if (!tooltip.classList.contains('show')){tooltip.classList.add('show');}});copyBtn.addEventListener('mouseleave',function(){const tooltip = this.querySelector('.tooltip-text');if (!['تم النسخ!','خطأ في النسخ','جاري النسخ...'].includes(tooltip.textContent)){tooltip.classList.remove('show');}});});});

//]]>

</script>

شرح طريقة تطبيق الميزة على كلمة محددة