This is what the title of this post is talking about:


Hello friend this is a text area that can hold your tutorial codes <a href="http://techbase.info">TechBase</a>

I actually got this idea from a number of blogs and while studying it I was able to come up with my own version of this textarea. It is mostly used in forms (contact forms) but as a blogger you can employ it in holding codes for your tutorial posts. In the past I used to differentiate my codes from the rest of the post by giving the text its own light yellow bg color, font color of green and a consolas font face.



Now I can just call up a predefined class as an attribute of my customized text area and all the defined parameters such as font type, color, size are applied.

Here is an example of this text area with a CSS defined class



.txtarea is the class and I think the rest is self explanatory. The background-color, width, height, and border attributes affect the text area box and color and font affects the text inside the text box.

Below is the code and I have gone ahead to create 3 seperate classes. One is txtarea-small, the second is txtarea-medium and the third is txtarea-large. You would use txtarea-small to hold small codes, txtarea-medium for more than small codes and txtarea-large for large texts.

How to apply the text area to Blogger
Log in to blogger and go to Design >> Edit HTML
Search for
Copy the code below and paste it above that code


How to Apply it to your Text/Code
While writing your posts, switch to HTML mode and enter the code below based on the size of text area you want

<textarea class="txtarea-medium" readonly="readonly"> Put Your Text or Codes here</textarea>

To make the text editable simply remove the readonly attribute like so:

<textarea class="txtarea-medium">Your code or text here </textarea>



Tip: You can change the colors, font size and all other attributes to suite your wants


Subscribe via RSS or Subscribe by Email.
Like TechBase on Facebook