How To Insert Text Box In Blogger Post

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 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


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

• Meet the Author ➞ Brief Tutorials

Hi, it’s me behind this blog - 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

Don’t Be Shy » Leave a Comment!