Creating Customized HTML Text Area Boxes

HTML-Text-Boxes Its really important to keep everything as attractive as possible while writing posts. Text Area boxes are a useful method of showing long bunch of text or code on your blog. Just last month I wrote two posts 25 Vertical Navigation Menus and 30 Horizontal Navigation Menus where I have used a lot of coding and all those coding were displayed inside fully customized text areas that made the post looked clean and neat. Text boxes are good only if there length and height is well controlled and today with this tutorial we will learn several ways of styling our default text areas.

Kindly see a demo first,

 

Live Demo

 

Before

text-boxes

After

text-boxes

How to Customize the Text Area Box?

To do this follow the steps below,

  1. Go to Blogger > Layout > Edit HTML
  2. Search for </b:skin>
  3. And just above it paste the code below,

.mbt-textarea {
padding:0;
margin:0;
background: #fff;
width:400px;
height:40px;

color:#666;
font:12px arial;
border:1px dotted #289728; }

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

 

     4.  Finally save your template!

How to show the Stylized Text Area Effect inside Blogger Posts?

To display this customized text area you only need to add the following code in the Edit HTML section of your Blogger Editor,

<textarea class="mbt-textarea" readonly="readonly">WRITE-TEXT-HERE</textarea>

 

Simply replace WRITE-TEXT-HERE with your text that you want to appear inside a box.

How to Customize The CSS of The Text Box?

If you wish to change the font, color or in short the entire look of the text box then you just need to edit the following areas in the CSS code above,

background: #fff; –> This Changes background color of the text area
width:400px; –> This changes width size of box
height:40px;  -> This changes box height

color:#666;  -> This changes font color inside text box
font:12px arial; –> This changes font size and font family respectively
border:1px dotted #289728; } –> This changes the border size, style (i.e dotted, solid, dashed) and color. Editing it will change the look of the border/outline across the text

.mbt-textarea:hover {
color:#289728; –> This changes font color on mouse hover
border:2px solid #666;  -> This changes border size, style and color on mouse hover

Now Simply edit the above codes as guided and create a perfectly suiting Text box for your beloved blogs. I hope it will be as interesting for most of you as it seems :> Do not hesitate to ask for any help if needed!

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

23 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Its Great and From now i will use this in my blog

    Take Look At This http://www.myworld4free.co.cc/

    I Used Boxes In Every Post So This Is Very Useful To Me

    Thanks For Sharing.Great Post

    ReplyDelete
  2. Good for bloggers, But Mohd, This way of text boxes doesn't allow us to have H2,h3 tags.

    But I have found another way the below codes inside DIV tag


    style=" overflow-x: scroll; overflow-y: scroll; "

    ReplyDelete
  3. @Porus

    You welcome brother! :>

    @TechGyo

    Dear there is no need to add H tags inside text boxes. Its good only to add some code or long piece of text inside it for copy-paste purpose. And yup the code that you shared it disabling the scrolling effect but how is it related to H tags.

    BTW your blog has turned into a stunning piece dude! :p

    ReplyDelete
  4. Already told you. You are very Good in coding ;) and now word to say :P

    ReplyDelete
  5. i have read this tutorial on allblogtools (Max)...:D

    ReplyDelete
  6. Hi. How R u? I need your help.

    You can see shoutbox in my blog. It is an Ajax shout box. When you click on shoutbox icon on side bar, a popup window opens with shoutbox inside that you can see. When we click anywhere on the background, it closes. I have mentioned the way to close just below the shoutbox popup box in text form "CLICK ON THE BACKGROUND TO CLOSE THIS WINDOW".

    What I need is to place this text on left or right, side of the popup box. It should be near to the box and exactly on the center portion from top of the popup box. This is because for the compatibility of the visitors. I mean, not all the monitors have the same resolution. If the resolution is small, it is difficult to find the text for the visitors. So I decided to place the text from bottom to left or right side (middle)

    I hope you got what I need. If not kindly tell me. I will explain in detail. Waiting for your reply.

    Hope you are fine.

    ReplyDelete
  7. Also what change should be made in the code, if I need to life the entire shoutbox, a little bit to the top to fit some screen resolutions

    ReplyDelete
  8. hi mohammad ..

    Thank you for this topic featured .. God bless you .. I really

    liked your blog

    and is now in My Favorites ... God bless you...khaled

    ReplyDelete
  9. thanks man due to this my site looks good....
    man how to re arrange html in text area ?
    have a look.
    http://techshake.info

    ReplyDelete
  10. Thanks for post.
    This is very important for me.

    ReplyDelete
  11. I hope this article will help me greatly in controlling and styling your text areas in a far better way. Thanks, Take care! :>

    ReplyDelete
  12. HTML text area boxes are good for long articles. Thanks for the tutorial.

    ReplyDelete
  13. cool.......... Thanks
    www.appforpc.tk

    ReplyDelete
  14. http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/priya-new-hot-and-cute-pics-latest.html
    http://cinemaleak.blogspot.com/2012/01/topless-hot-pics-of-gabriella-fhm.html
    http://cinemaleak.blogspot.com/2012/01/topless-sunny-leone-in-saree.html
    http://cinemaleak.blogspot.com/2012/01/aishwarya-priyanka-in-dabboo-ratnani.html
    http://cinemaleak.blogspot.com/2012/01/malaika-arora-at-launch-of-sunsilk.html
    http://cinemaleak.blogspot.com/2012/01/diya-mirza-at-filmfare-nominations-bash.html
    http://cinemaleak.blogspot.com/2012/01/bipasha-basu-in-dabboo-ratnanis.html
    http://cinemaleak.blogspot.com/2012/01/katrina-kaif-louis-vuitton-fall.html
    http://cinemaleak.blogspot.com/2012/01/esha-gupta-top-less-on-femina-issue.html

    ReplyDelete
  15. Greate article, i have also implemented this on my blog

    http://www.friendgin.in/

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. NICE MAN..THANKS A LOT.. IT LOOKS GREAT

    Get MBa/mba full notes material of management, markeeting, economics
    Easy Mba PLus

    ReplyDelete
  18. I want to add the way you added the MBT code
    can u tell me plzzzzzz

    ReplyDelete
  19. Hi Mohammad, how to make html box like yours? I mean, when I write a html code in a post, it has background like you have. Thanks

    ReplyDelete
  20. Dear bro how to make a box like yours with logo?

    ReplyDelete