How to Add - Textbox area in blogger posts?

Creating a blog with nice looking and user friendly posts is very much required. In some cases we need to use textbox areas if we are providing some code/data on the blog posts which could be copied and pasted by the blog visitor. Using such textbox in the posts make them beautiful and user friendly.

The textbox areas usage makes the blog formatted as the data that can be copied is provided in textbox area. This also avoids the visitor task of copying the content using right click (Select the content to be copied -> Right click and select "Copy").

Let us see the process of adding a textbox area in blogger posts.


1. Open up the blog post in HTML view.
2. Now add the tags textbox start and end tags to the post text that we need to have it in a textbox.

<textarea>Write Your Textbox Text Here</textarea>



3. Publish the post and view the blog to see the changes.


NOTE: We can have the textarea box height and width adjustment by adding CSS code to the blog template.
We need to add the CSS code to the blog template just above the code "]]></b:skin>" in blog template HTML code.
Or add the CSS code via - Dashboard-> Layout-> Template Designer-> Advanced-> Add CSS


textarea { background: #FFFFFF; width: 500px; height: 150px; overflow: auto; border: 2px dotted #00D323; font: 12px arial; color: #888; padding: 5px; margin: 0; } textarea:hover { color: #009DFF; border: 2px solid #00FFF7; }

Example of Textbox:

This is the text included in textbox. The scrolling will also be displayed if we have text that extends to more than two lines with in the textbox.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.