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 published post on the blog to see the the textbox area with the text included.
The textbox area looks like the one below.
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”
Yes Guys! … You have successfully added CSS code to customize the textbox area on your blog.
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.
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