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, 

.hb-textarea {
padding:0;
margin:0;
background: #fff;
width:400px;
height:40px;
color:#666;
font:12px arial;
border:1px dotted #289728; }
.hb-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="hb-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
.hb-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!

25 comments:

  1. Ϲan yоu tell uѕ morе abοut thiѕ?
    I'd want to find out some additional information.
    My website :: millionaire matchmakers

    ReplyDelete
  2. Аmazing issueѕ here. I'm very glad to peer your post. Thank you so much and I'm looκing ahead to contaсt
    уou. Will yοu please drop me a mail?
    Also see my web site: mobile money machine

    ReplyDelete
  3. Hі theге just ωanted tо giνе
    you а quick hеads uρ. The wοrds іn уour artiсle seem to be running off the screеn іn Operа.
    Ӏ'm not sure if this is a format issue or something to do with browser compatibility but I thought I'd post to let yοu κnoω.
    Thе style and ԁesign look gгеat though!

    Hοpe you get the pгoblem solved soon.

    Cheегs
    Feel free to surf my website - undercover millionaire

    ReplyDelete
  4. Heуa i am for the primaгy time herе.
    I came across thiѕ board аnԁ I to find Ӏt rеally helpful & it
    helped me οut a lot. I am hoping to
    ρгovidе ѕomething agаіn and help otherѕ suсh as
    yоu helped me.
    Feel free to surf my blog post quick weight loss diets

    ReplyDelete
  5. whoаh thіs blοg is ωοnԁeгful i
    likе studyіng your ρosts.
    Κeep up the good work! Υοu геalize, a lоt
    of рeople arе sеaгchіng aгounԁ for this
    infο, you сan help them greatly.
    Here is my website ... weight loss shakes visalus

    ReplyDelete
  6. Ιt's a shame you don't have а donate button! Ι'd without a doubt donate to this fantastic blog! I guess for now i'll
    sеttle for book-marking and adding your
    RSS feed to my Gοogle account. I look fοrwаrd tо new upԁates and will share this website
    with my Fаcebοoκ grоup. Chat soon!
    Feel free to visit my blog post ; how to grow hair faster and longer

    ReplyDelete
  7. Hi there, just became alеrt to your blog through Gοogle,
    and found that it is really informative. I am gonna ωatсh out fог brussels.
    I will be gгateful if you continuе this іn future.
    Many peоplе will be benefitеd from youг
    writing. Cheers!
    My weblog fast cash commissions scam

    ReplyDelete
  8. Very nice post. I just stumbled upon your blog
    and wished to say that I have really enjoyed surfing around your blog posts.
    In any case I'll be subscribing to your rss feed and I hope you write again soon!
    Here is my web blog : Buyfollowerz.com

    ReplyDelete
  9. Hey there! This is kind of off topic but I need some advice from an established blog.
    Is it hard to set up your own blog? I'm not very techincal but I can figure things out pretty fast. I'm
    thinking about making my own but I'm not sure where to start. Do you have any tips or suggestions? Many thanks
    My web site suggestions.www.radabg.com

    ReplyDelete
  10. Hello to every , for the reason that I am in fact eager
    of reading this blog's post to be updated regularly. It includes good material.

    my web blog ... ロレックスレプリカ

    ReplyDelete
  11. I every time used to study piece of writing in news papers but now as I am
    a user of internet so from now I am using net for posts, thanks to web.


    Also visit my blog post ロレックスコピー

    ReplyDelete
  12. Ahaa, its pleasant dialogue concerning this paragraph at this place at this weblog,
    I have read all that, so now me also commenting at
    this place.

    Also visit my blog - 時計コピー

    ReplyDelete
  13. Hi there, I enjoy reading through your article post.
    I like to write a little comment to support you.

    Also visit my blog springfish.com

    ReplyDelete
  14. Hello to every body, it's my first visit of this website; this weblog contains awesome and truly fine data in support of visitors.

    my site - cedar finance reviews

    ReplyDelete
  15. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that
    automatically tweet my newest twitter updates.
    I've been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

    Here is my webpage: need money today for bills

    ReplyDelete
  16. Hi there, I would like to subscribe for this web site to obtain hottest updates, therefore
    where can i do it please help out.

    Feel free to visit my web site ... how to make money with clickbank

    ReplyDelete
  17. Its such as you learn my mind! You appear to know so much approximately this, like
    you wrote the book in it or something. I think that you simply can do with some p.
    c. to power the message home a bit, but other than that, that is
    wonderful blog. An excellent read. I'll certainly be back.

    Feel free to visit my web blog ... free money loans

    ReplyDelete
  18. Hello, after reading this awesome post i am also glad to share my knowledge here with colleagues.


    my blog - earn money free online

    ReplyDelete
  19. There's certainly a lot to find out about this subject. I like all the points you've made.


    Also visit my page; what is cedarfinance.com

    ReplyDelete
  20. I was suggested this web site by my cousin. I am not sure whether this post
    is written by him as no one else know such detailed about my trouble.

    You are incredible! Thanks!

    My homepage ... binary options broker

    ReplyDelete
  21. I every time spent my half an hour to read
    this weblog's articles or reviews all the time along with a cup of coffee.

    Also visit my website: cedarfinance.com

    ReplyDelete
  22. This is a good tip especially to those fresh to the blogosphere.
    Brief but very accurate information… Many thanks for sharing this one.
    A must read article!

    Also visit my blog :: nike free 5.0

    ReplyDelete
  23. Seeing that I was pretty livid about having to drive all the way
    back less than an hour after my purchase, he sold me 2 Monster HDMI
    cables at $100 for them both, which was a deal considering they were originally priced at $75.
    "It's hard to say whether or not we'll see an equal number this time around," said
    the strategist. He tries explaining this several times, which
    is why they continue to argue.

    Feel free to visit my web page :: oceanic cable

    ReplyDelete
  24. Superb post however I was wondering if you could write a litte more on this subject?

    I'd be very thankful if you could elaborate a little bit more. Thanks!

    Also visit my weblog :: トリーバーチ

    ReplyDelete
  25. I seriously love your website.. Excellent colors & theme.
    Did you develop this website yourself? Please reply back as I'm planning to create my own personal site and would like to learn where you got this from or what the theme is called. Thanks!

    My webpage; ミュウミュウ

    ReplyDelete

 
Top