Home » Blogger Tutorials, Tricks and Hacks » Blogger Posts / Archive Tricks » Create a Customized Text Area In Blogger Using Simple CSS

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Create a Customized Text Area In Blogger Using Simple CSS

Create a Customized Text Area In Blogger Using Simple CSS

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

9,725 views

Summarized and precise posts are always appreciated by both visitors and search engines. Text Area or Text Boxes are indeed an easy way to share large bulk of codes with your readers. Bloggers who write tutorials in designing or development field, often share CSS, HTML, XML and JavaScript codes inside a BlockQuote. This method can surely be adopted but only for showing short codes or written text but if you want to share really long and bulky codes then the only way to keep your page load-time low and yet share such long codes is to use Text Areas.

How is a default text area looks like?


See an example of a text area below to get an idea of what it actually is.

What’s New Here?

I am sure you didn’t like the grayish look of the box above and wish to add some colors and effects to it. Now see this demo –> Customized Text Area

Lets now learn how to add this cool effect to our text areas. Follow the steps below to add a highly stylized and customized text area in your blogs,

Step 1.

Paste the code below just above

  • Go To Blogger > Layout > Edit HTML
  • Search for
    </b:skin>
  • Paste the next code above it.
    .mbt-textarea {

    padding:0;

    margin:0;

    width:400px;

    height:40px;

    color:#0080ff;

    font:12px arial;

    background:#fff;

    border:1px dotted #289728; }

    .mbt-textarea:hover {

    color:#289728;

    border:2px solid #666; }

    .mbt {

    padding-top:3px;

    margin:0;

    color:#289728;

    font-size: 9px;

    font-family: sans-serif, verdana;

    }

Now click Save Template and you are done!

How to use it in your posts

Now when ever you write a post use the HTML code below to display a text area,


<textarea class="mbt-textarea" readonly="readonly">WRITE-TEXT-HERE</textarea>
  <p class="mbt" ><u>Press "Ctrl + A" to Select and "Ctrl + C" to Copy </u></p>

You just need to replace WRITE-TEXT-HERE with your bulky code or text. The bolded black text appears below your text area and it instructs your readers how to easily select and copy your codes. If you don’t want this text to appear below the text box then simply delete the code in blue and black

How To Customize The Text Area

I am rewriting the CSS code above with explanation of each part,


.mbt-textarea {
    padding:0; 

margin:0; 

width:400px;
      height:40px; 

color:#0080ff; 

font:12px arial; 

background:#fff; 

border:1px dotted #289728; } 

.mbt-textarea:hover {
    color:#289728;
        border:2px solid #666; } 

.mbt {
        padding-top:3px; 

margin:0; 

color:#289728; 

font-size: 9px; 

font-family: sans-serif, verdana; 

}

1) If you want to decrease or increase the height or width of the text area, simply edit

width:400px;

height:40px;

2) To change the color of the text in active mode change the six digit code in this code,

color:#0080ff;       (Use our Color Chart to use a color of your choice)

3) To change the color of the text in Mouse hover mode, edit this,

color:#289728;

4) To change the border width, style and color in active mode edit this code,

border:1px dotted #289728;

where, width is 1px, style is dotted and colour is #289728

5) To change the border look in mouse hover mode edit this,

border:2px solid #666;

6) To change font size and family, edit this,

font:12px arial;

where 12px is the size and arial is the default family that I have used.

7) To change the color and font size and family of the text “Press "Ctrl + A" to Select and "Ctrl + C" to Copy “ edit this code,

.mbt {

padding-top:3px;

margin:0;

color:#289728;

font-size: 9px;

font-family: sans-serif, verdana;

}

That’s All!

I hope this tutorial will help you greatly in controlling and styling your text areas in a far better way. Kindly do not hesitate to ask any question. Your question is more than an honor for us. Take care! :>

Liked It ? Please Share

Comments

12 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. lanzhit says:

    good…thanks 4 ur trick…

  2. beben says:

    aw aw … so diligent…
    thanks max ^,^

  3. III.5 says:

    Great tut.

    ThanX

  4. Arijit Das says:

    Thanks for such a nice tutorial about creating a Text Area!! :)

  5. Mark says:

    How Can you have Text with breaks without the box showing the and making all of the text contiguous?

  6. Sreejesh says:

    Hi, Mohd. cool post!!!! :)

  7. manny says:

    gracias mi hermano muy bueno peor necesito que me ayude quieor saber como poner las entredas pequena como la tienes tu y qeu se oculte lo de adentro

  8. Mark says:

    Is there a way to make the Text be formatted with spaces between paragraphs and with no Br breaks and html code showing in this scroll box?

  9. Max says:

    thanks all for your comments,
    @ Mark, You can do it easily, please visit our tools page and click on html character encoder for more info.

  10. Esydownloads says:

    thanx this is useful for me

  11. great way
    thanks man

  12. Downloadtaky says:

    What do u think I can improve in my blog?
    Best regards,
    Marco.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here