What are code box?
How to add code box to blog is the most asked question by many bloggers. Blogger html code box is a box where we can enter some codes or sentences to give to visitors. Visitors can copy the entire code by clicking the Copy button.
Table of Contents
- How to add code box with copy to clipboard button in Blogger?
In this article, I will show you how to add code snippets to your blog. Users only need one click to get the long code you provide. Hello, this is text.
- Benefits of adding text boxes to your blog site.
There are many benefits to adding text boxes to your blog posts. Code boxes provide a nice visual appeal to users and can make the entire text more interesting even with code boxes. Using code snippets, you can access various coding languages such as HTML, Javascript, Java, CSS, Python, etc. So without further ado, let's get started.
- How to add a code box with a button to a blog site.
Follow the steps to correctly add a code box with a copy button to your blog posts.
First, log in to your blog account and create a new post account. After creating the post, write the view as HTML view and copy the html code given below and paste it into the html view. You can add your text to the <{----Enter You Code Here----}> tag.
Code Box
<textarea cols="100" id="htmlText" readonly="" rows="20" style="background-color: #5fc9c2; color: white; height: auto; overflow: auto; resize: none; width: 100%;">
{----Enter You Code Here----}
</textarea>
<button id="htmlBtn" onclick="copyhtml()" style="background-color: #4caf50; border: none; color: white; cursor: pointer; display: inline-block; font-size: 16px; margin: 4px 2px; padding: 10px 30px; text-align: center; text-decoration: none;">Copy</button>
<script>
function copyhtml() {
const text = document.querySelector("#htmlText");
const btnText = document.querySelector("#htmlBtn");
text.select();
document.execCommand("copy");
btnText.textContent = "Copied";
setTimeout(function(){
btnText.textContent = "Copy";
}, 5000);
}
</script>
<br /><br /><div></div>
Now you can edit your text and add numbers to it. You can add simple text without checking the html code, but to add html or css code you need to check the code and place it in the tag.
Your number will now be visible and printable to users. You can use free parsing tools to analyze html codes.
After parsing the code, paste the pre tag (<pre> Enter Your code here </pre>) Enyer Your code here.
0 Comments
Please do not enter eny spam links in the comments box, All the Comments are Reviewed by Admin.