Saturday, 20 July 2013

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").

textbox area

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>

image1

3. Publish the post and view the published post on the blog to see the the textbox area with the text included.

The textbox area looks like the one below.

image2

The textbox area added is a default textbox area and its not worthy enough adding a default, usual or a normal looking textbox area. So let me explain you how we can make this textbox area more beautiful and attractive.

How to make the textbox area attractive?


Adding CSS code to the blog template with help us making the textbox area more attractive with your customized settings or adjustments for the below options.

  • Textbox Height
  • Textbox Width
  • Textbox Background Colour or Image
  • Textbox Border Style and Colour
  • Font style, size and colour
  • Hover effects to the textbox area

You can use the below textbox area CSS code and can customize the to match the textbox area to your blog template’s style and colour.

Let me explain the process of adding the textbox area CSS code to the blog template.

CSS code can be added to to your blog template by any of the two ways mentioned below.

1. Go to: Dashboard –> Template –> Edit HTML –> Search for the code ]]></b:skin>

>>>Add CSS code just above the code ]]></b:skin> in blog Template HTML code.

OR

2. Go to: Dashboard –> Layout –> Template Designer –> Advanced –> Add CSS

>>>Add CSS code in the code area provided against “Add CSS”

 

Island with a palm treeNOTE: Once the CSS code is added to your blog template HTML code, all the textbox areas on the blog with be converted according to the customized CSS code added. And also, all the textbox area created here after on your blog posts will be according to the new customized CSS code added to your blog.

 

Yes Guys! … You have successfully added CSS code to customize the textbox area on your blog.Thumbs up

Example of Textbox area

 

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.

Reactions:

2 comments:

  1. Is it possible if i can make a drop down text box area by clicking a keyword? For example, the keyword is 'SYNOPSIS'. When readers click on it, the the text box will appear right under it.. TQ. :)

    ReplyDelete

ABOUT ME

Founder & Author: Hi Friends, my name is Arun Kumar Choppara. I am a Software Engineer by profession and a passionate blogger. I have started blogging as a hobby and now addicted to it.
...Read More