How To Insert Text Box In Blogger Post

Insert-Text-Box-In-Blogger
This post will help you to put text box in Blogger Posts. You can use this text box to highlight HTML codes, Important texts, etc. Just enter “Edit HTML” while creating post and paste below codes into desired location.
Tip: Just enter “xxx” in compose mode where you want to insert Text box and switch to HTML mode. After that find (Ctrl+F) “xxx” and replace it with below code.

Normal Text Boxes For Blogger

  • To Create Editable Text box

[code type=codetype]   <textarea rows=”3″ cols=”10″>Your Text Here textarea>[/code]

  • To create Read only text box

[code type=codetype] <textarea rows=”5″ cols=”20″ name=”Privacy Policy” readonly=”readonly”>

Your text here </textarea>[/code]

  • To Create Link Text box

[code type=codetype]<textarea rows=”5″ cols=”20″ name=”Link To Blog” readonly=”readonly”>Your HyperLink Code Here </textarea>[/code]

Text Box With Custom CSS  For Blogger

The above text box doesn’t look good, huh! So if you want a good-looking text box with stitched border, shadow and hover effect add below codes to your template. This text box developed by Gurwinder Singh from Infozguide.com. This is a CSS modified text box, so you need to edit your template this time.

Custom CSS Text Box Live Demo Here

  • Goto  Blogger Dashboard > Template > Backup/ Restore > Download Full Template.
  • Now edit your HTML by going Template > Edit HTML
  • Press Ctrl+ F and search for

[code type=codetype] ]]></b:skin>[/code]

  • Now paste the below code above that code.

[code type=codetype] .IGtextbox { color: white; background-color: black; width: 500px; margin: 5px 60px; padding: 20px 20px 20px 20px; border: 2px dotted lightgrey;

border-radius: 10px; box-shadow: -1px -1px 12px 2px gainsboro; transition: background-color .777s; -webkit-transition: background-color .777s;

-moz-transition: background-color .777s; -o-transition: background-color .777s; -ms-transition: background-color .777s; } .IGtextbox:hover { background-color: CornflowerBlue ; } .IGtextbox:active { background-color: darkgreen ; }[/code]

  • Click on Save Template.

Now onwards you can add this search box directly to your blogger posts. When you create a new post, then write your article and now wherever you want to add this text box just mark ‘xxx‘ and switch to HTML view. Now search (Ctrl+ F) for ‘xxx’, you can replace it with below code:

[code type=codetype]

monospace;”>Your Text/Code Here

[/code]

Publish or preview your post, you can find awesome text box. If you need any customizations comment here below.

• Meet the Author ➞ Sebin Thomas


Hi, it’s me behind this blog - BriefTutorials.com. Interested to blogging, SEO Area, WordPress Themes, Plugins, Gadgets and various blogging tools. Want to connect with me? Add me in your Google+ circle and lets get connected.


7 comments… add one
  • Not working bro can u help me!!

    Reply
    • I assume you inserted Text Box With Custom CSS For Blogger. Can you give me a url where you inserted above codes! Also please describe your error as much as you can.

      Reply
  • not working :(
    I really want it but not working :(

    Reply
  • Sir i am unable to show it on my blog
    i emailed you my blogger login info…!!!!
    kindly send me the problem that why i am unable to show css text box on my site
    email me whole information…

    happy regard!!!!

    Reply
    • I didn’t got your login info. There is no need to send login details, just send your template backup, I’ll fix it for you.

      Reply
  • not working bro i am using flex blogger template

    Reply

Don’t Be Shy » Leave a Comment!