How to Add a Code Box in Blogger Blog Post?

Hi Bloggers, there are times you want to write some tutorials, some tips that want to add some lines of HTML, CSS, XML, Javascript code into your blog post. BlockQuote can surely be adopted but only for showing short codes or written text but if you want to share really long and bulky codes, the best way I think is to use Text Areas, it can keep your page load-time low and can share such long codes easily.
To do it, while drafting the Post, switch to “Edit HTML” mode to insert the following code:

<p align="left">
<textarea name="code" rows="6" cols="20" readonly="readonly">   
Save Your code here 
</textarea>
</p>

Remarks:
- Rows ="6", shows the height of the text area. If you want to have a high text area, you just change “6” with higher number.
- Cols="20", shows the width of text area. If you want to have a wider text area, just change “20” with the other higher number.

If you want your visitor can easily copy the whole text or code given, you may want to create a Select All button. By clicking Select All button, all code or text in the box will be highlighted and finally, just copy the highlighted code or text. To do it, please use the following HTML code:

<div>
<form name="copy"> 
<p align="left">
<textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly="readonly">
Save Your code here 
</textarea></p>
<div align="left">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All">
</div>
<div align="left"> </div>
</form>
</div>

 And you can see the result in your post like below:

Save Your code here Save your code here Save your code here Save your code here Save your code here Save your code here Save your code here

Posted in: Blogger Blogspot Tips