Writing an article is not all about writing like an essay. You need to insert a box in blogger post frequently. But it seems to many of you difficult. Responsive box for blogger post is easy to make with HTML and CSS. But if you don’t know HTML and CSS no worries, Tips Bangla is going to share easy way to make box in blogger post. 

ALSO READ- Valuable Blogging Tips and Mistakes That Blogger Beginners Should Avoid-2022

Let me tell you what you are going to learn from this article-  

1. How to create responsive box in blogger post

2. How to create stylish warning box in blogger post

3. How to create information box in blogger post

4. Box in blogger post without html and css 

5. Box code in blogger post

Premium Template Free !

Well, Tips Bangla is going to provide you a complete solution of the above mentioned quires. Let's get into the main point of the Article.

Responsive text box in blogger post

Maybe you need to share a caution or warning. Or an optional step in a how-to post. These are just a few cases for which you may want to highlight information in your post so that your reader is sure to see it. Using a text-box to make this information pop out is a simple solution. Look at the below box which is created with the code also mentioned in the below-

Example Text-Box: Tips Bangla found a more in-depth tutorial on how to create simple text-boxes in a post from an article. You can follow Tips Bangla to get more attractive blogging tips.

<p style="padding:2px 6px 4px 6px; color: #555555; background-color: #eeeeee; border: #dddddd 2px solid">Add your text you want in the text-box here</p>

Step-1

Copy the code and then write what you want to show in the box. 

Step-2

Go to html view of your post and paste the code where you want to show your responsive information box in your blogger post. 

Step-3 

Preview your post 

Congratulations! You got a box.

Responsive Stylish box with CSS

Knowing what each of the CSS properties is for, allows you to be able to edit the above code and customize your text-boxes however you want.

What if you wanted to make your text-boxes match your brand colors? You could simply switch out the hex color codes for your brand color hex codes.

Look at the below box. And try to make a responsive stylish box for your blogger post.

This is a sample text by Tips Bangla. You can write what ever you want in your box. Using CSS is really amazing. You can design your boxes however you want. You can follow Tips Bangla to get more amazing tips.

<p style="padding: 2px 6px 4px 6px; color: #555555; background-color: #ecf8f7; border: #44bcb3 5px dashed;">What you want in the text-box </p>

Step-1

Copy the code and then write what you want to show in the box. 

Step-2

Go to html view of your post and paste the code where you want to show your responsive information box in your blogger post. 

Step-3 

Preview your post 

Congratulations! You got another box.

Opinion box in Blog post

Creating box for your blogger post is really funny, right? Yes, You can make any stylish box using CSS and if you don't know CSS no problem, Tips Bangla is here to help you out. Look at the below box-

This is Opinion box, which can be used as "Also Read" button.

<p style="padding: 2px 6px 4px 6px; color: #555555; background-color: #e6f6ff; border: #4489bc 5px; border-left-style: solid;">What you want in the text-box would go here</p>

Step-1

Copy the code and then write what you want to show in the box. 

Step-2

Go to html view of your post and paste the code where you want to show your responsive information box in your blogger post. 

Step-3 

Preview your post 

Congratulations! You got a Opinion box.

Hope You are clear about how to create a stylish box in your blogger post. Please follow our blog and get much more informative posts. Thanks