Add code block with select all or copy button in blogger

 If you have a technical, coding or programming blog surely you need how to write code inside a box or block code, sometimes the code is too long and selects it manually is annoying to the reader, for that adding a copy or select button became very useful and looks more professional.

In this blog post, we will see both cases (copy and select).

A code block with Select all button:

This is how the code looks like:


By clicking on the bottom "Select all" you select the entire code inside the box, to insert a similar code box in your post just copy/past the code bellow inside your post in the Html editor mode:

<div style="text-align: center;">

<form name="myform">

<textarea cols="50" dir="ltr" name="mytext" rows="5">

 Your code here

</textarea>

</form>

<button onclick="document.myform.mytext.focus();

document.myform.mytext.select();">Select all</button>

</div>

 Replace the red text with the code you want to be selected, you can change the number of rows and columns of the textarea.

A code block with Copy button:

There is no difference to the previous code, here is how it looks:


To insert this box just copy/past the code bellow in you post (in the Html editor):

<div style="text-align: center;">

<form>

<textarea cols="50" dir="ltr" id="mytext" rows="5">This a sample code to be copied

Your code here

</textarea>

</form>

<button onclick="document.getElementById('mytext').select();

document.execCommand('copy');

alert('Copied to clipboard');">Copy all</button>

</div>

 

Replace the red text with your code, you can also modify the dimensions of your box by changing rows and cols value in the textarea element.

And that's all, i hope it was helpful see you in a new blogger tip.

Post a Comment (0)
Previous Post Next Post