This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change.
Blogger FAQ and Help

Header
  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

Sidebar
  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

Footer
  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

General
  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 31, 2007

Digg This Story

Add Text Box and Textarea

There are times when you want to insert plain text into your Blog Post or template. This may be a piece of HTML code or JavaScript that you would like readers to copy, such as the “Link to Our Site” code in the sidebar. It could also be the Terms of a Legal Agreement that users can view. As we shall be discussing in our article on creating forms in Blogs, the text box can also be used in feedback forms for users to input feedback and comments.

The HTML code of the text box makes use of the <textarea> property. For the text box to be in a Blog Post, while drafting the Post, switch to “Edit HTML” mode to insert the following code. If it is to appear in the sidebar or other parts of the template, go to Template -> Page Elements -> Add a Page Element and select “HTML/JavaScript” to insert this code.

Users can input text

The textarea HTML code which allows users to input TEXT is this:-

<textarea rows="5" cols="40">
TEXT
</textarea>


The attribute cols indicates the number of visible columns and the rows shows the number of visible rows. Note that this simply sets the dimensions of the text box. The lines of text can exceed the specified area, and when that happens, there will be scrollbars at the sides to allow users to view all the contents. In the above code, users can input words and characters into the text area. There is no limit to the amount of text that can be inserted but browsers may have their own preset limits. This is what readers will see:-



Read only Textbox

If the text box contains terms and conditions or information, we can insert a <readonly> attribute into the textarea code. Readers can view the text but they cannot edit or amend it, or insert any input into the box. This is the HTML code:-

<textarea rows="2" cols="30" name="Famous Quotes" readonly="readonly">
“Asking a working writer what he thinks about critics is like asking a lamp-post how it feels about dogs.” ... Christopher Hampton
</textarea>


We changed the value of the rows and cols to give you an idea how big the boxes will be with these values. A name can be assigned to the textbox for scripting purposes. Here, we have set it to display a readonly text which users cannot edit, but can still select and copy, like this:-



Link to Site Text Box

To display a code for readers to link to your Blog, you can make use of the <readonly> attribute. Instead of text, insert the Hyperlink HTML code. The textarea code can be this:-

<textarea rows="4" cols="25" name="Link to Site" readonly="readonly">Hyperlink Code</textarea>


Textarea Word Wrap

This is perhaps more relevant when we apply the textarea code to forms. When the text reaches the end of a row, the words can be wrapped in these manners:-

"soft" wrap – text will wrap as the user types but line breaks are not included when the text is submitted in a form.

"hard" wrap – if users enter line breaks into the text, it will be shown in the submitted form.

wrap is "off" – this will put all the words in one line, without any line breaks or wrapping.

The default value is "soft" wrap.

<textarea rows="8" cols="30" wrap="hard">
TEXT
</textarea>




© Tricks for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

20 comments:

sundae said...

Hi there.
I have problems while working on this code. Everytime I type "enter", the text box always show '<' br/ '>'

How can I get rid of those unwanted codes, but still can have multi lines text in the text box?

Huge thanks.

suryaholic@gmail.com

Wael said...

hi , thank u very much for this great topics
but i have a problem
when i break line 9 press enter 0 in the textarea box , it shows me word (brb) which means a new line
and when i type in colored , it show me (span)
and i cant delet it
can u help me or give me ur code by which u can type html colored codes that i see in your blog ?
thank u agian

Wer Ist Angie said...

hi

I have set up a search box with text typed in the box serving as a sample. I kind of expected those sample letters would automatically disappear as soon as I start typing in the box..... tried using the"OnClick" and "Reset", but didn't work...Could you please help me out with this?

Thanks a lot,
Angie

Andrée said...

I tried this and it worked but it looked ugly. The background was white in a green post page.

How do I add HTML code to display for readers like you have done in your blog so that they can copy and paste? Yours is so neat and tidy.

Thank you! (I have checked off the email follow-up.)

letstalkaboutthat said...

Please help me to show my css code inside the scroll box code that you show here. The css code is changing or it is automatically encoded. I want to show the css code as itself
Thanx

Nithya said...

Thanks . the post was really helpful to me

Nithya

daezblog said...

Thanx for the add text tip...
It really helps...
Pliz visits my blog at poisonedchocolate.blogspot.com

JoVie said...

it's very great....
Now I've kept Ur page in My Book Mark list....and I read everytime, thank U very Much for ur Tips..

j-o-v-i-e

Anonymous said...

How do you add a colored box background around each post?

Rebecca said...

HELP!!! Ok. It's almost working. One slight problem -- I type it all in HTML and then when I click over to compose view, the text "http://not-a-real-namespace" has been mysteriously added in front of my a href address. ACK! What am I doing wrong???

Of course I've pushed this to a deadline. Any way you can help me before Friday??? ;^)

Danish just call me Danial said...

Hello!
Thanks a lot for such a nice articel
really gud
i was searching for it
thanks to owner

Crayboff said...

Dunno if it's relevant, but I found this site which has pretty much word-for-word of this posting. http://weblogian.com/blog/index.php/2008/07/add-text-box-and-textarea/

I know it's a pretty old post, but I just came across it and didn't see anything credited to your site (the date tags says yours came first).

Sorry if I am wrong and they are posting it with all the rights necessary, it's just that they seem to be claiming copyright over it (they copyright their site which implies that everything not credited to somewhere else is theirs).

-Crayboff (slightlytoastedtomatoes.blogspot.com)

P.S. I know this comment has to go through moderation, so don't publish it if you don't want to, I just couldn't figure out any other way to bring this to your attention (an email address would be nice)

ARTI said...

It is cool thanks you very much.

prem.jayaraj said...

when i want to paste any adsense html code or any pagecounter html code.i dont know where to paste it.i will paste it in the posts.plz tell me how to add that posts to right side of my blog that is below the gadgets or like gadgets........mail me to
JAYARAJ_YADAV@YAHOO.CO.IN
plzzzzzzzzzzzzzzzzzzzzzzzzz

Meg said...

I was trying to use this code under my custom button so that people could place my button on their page.

I was able to get this code to work, but when my people went to put it on there blog, it would not let them paste it. The could select it and would CTL+C but when they went back to there site to paste, it was blank.

Do you have any suggestions?

Russel said...

Hi, this is fantastic. I like it very much. I have implemented your tips in my blog:
http://makeblogpopular.blogspot.com

igvirene said...

Hi thanks, it worked well. I figured out some tags and it worked the way I want it. Thank you so much!ü

monci said...

When i add multiple lines always show how can I get rid of it.

eBooks said...

Great article.., thanks

Sarfraaz Ahmed said...

@sundae

This might be very late to reply. But, I found the same problem about '<'br /'>' being inserted as noted in the first comment of this post.

A little bit of googling and I found that I could combine the '<'pre'>' tag with the textarea tag to work around this problem.

All you need to do is embed your textarea tag within the pre tag.

Something like :
'<'pre'>'
'<'textarea rows=5 cols=80'>'
put
your
content
here
'<'/textarea'>'
'<'/pre'>'