Create Content Box with Copy Button in Your Blog – To let readers get a Copy
I’m delighted by my new learning, because I’m learning and whenever I encountered a resource to get everything by dragging mouse or highlighting, it felt tiresome job. So, I searched enough to find something for myself to use in my contents for my audience is shared here, a “Box with Copy Button”.
سیکھنے کا عمل ایک عجب تسکین لیئے ہوئے ہے۔ کیونکہ میں نت نئی چیزوں کا مطالعہ کرتارہتاہوں اور سیکھتا ہوں۔ جب کبھی ضرورت پڑنے پر مجھے مطلوبہ معلومات کو ہائیلائیٹ کرکے ماؤوس کے ذریعے کاپی کرنا پڑتاہے تو اس سے مجھے بہت الجھن ہوتی ہے۔لہٰذا؛
کافی تلاش اور مطالعے کے بعدمیں ایسی سہولت اپنے قارئین کرام کے لئے اپنی بلاگ میں شیئر کر رہاہوں۔ فی الوقت یہ صرف کمپیوٹر کمانڈوں اور مواد سے متعلق ہے، مگر یہ دوسرے تحریری مواد کے لئے بھی استعمال ہوسکتی ہے۔
To watch the video exercise for this task, Click here!
اس بلاگ کی عملی مشق کی وڈیو دیکھنے کے لئے اوپر دیئے گئے لنک پر کلک کریں
Sample Box with Copy Button
نمونہ باکس کاپی بٹن کے ساتھ
🔥 PASTE YOURS CONTENT HERE آپکی تحریر یہاں پیسٹ کریں🔥 Command CopiedCopy the following code and enjoy blogging.
ذیل میں دیاگیا کوڈ کاپی کرلیں، اور بلاگنگ کا لطف اٹھائیں۔
<div class="command-box">
<code>
<span style="font-size: 25px;"><font color="blue">
🔥 PASTE YOURS CONTENT HERE آپکی تحریر ادھر پیسٹ ہوگی🔥
</font></span>
</code>
<button class="copy-button" onclick="copyCommandToClipboard(this)"><span style="font-size: 25px;">📥 Copy</span></button>
<span class="copy-message">Command Copied</span>
</div>
<script>
function copyCommandToClipboard(button) {
var commandText = button.previousElementSibling.innerText.trim();
navigator.clipboard.writeText(commandText);
var copyMessage = button.nextElementSibling;
copyMessage.style.display = "inline-block";
setTimeout(function() {
copyMessage.style.display = "none";
}, 2000);
}
</script>
<style>
.command-box {
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 10px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.command-box code {
flex-grow: 1;
}
.copy-button {
background-color: transparent;
border: none;
padding: 0;
cursor: pointer;
font-size: 1.2rem;
}
.copy-message {
display: none;
margin-left: 10px;
font-size: 0.9rem;
font-weight: bold;
color: green;
}
</style>
Please do show your support to boost positive energies.
Comment and Share the post and videos.
Thank you. 💝
اپنی مخلصانہ رائے کا اظہار ضرور کریں،
اور پوسٹ اور وڈیو کو شیئر کریں۔
شکریہ 💝