Add Colored Boxes in Blogger Free

Hello Everyone, Welcome To Blogging Royale!

Do You want to Add Colored Boxes in Blogger? We will show you how to Add Colored Boxes in any Blogger website!

What is Colored Box?

Add Colored Boxes in Blogger

This is the demo of colored boxes. You can add or change the content of the box. Colored boxes can attract the attention of the audience.

Click Here to see All Colored Boxes Demo

Colored boxes can easily attract visitor’s eyes and you can give your message to your visitors. If you want to show a success message then you should use a green box. For showing Error message you have to use the Red box.

For Showing information message you should use Blue box. If you want to show a warning message, then you should use Orange or Yellow Box.

Add Colored Boxes in Blogger

To Add Colored Boxes in Blogger you have to add CSS in your theme and HTML in post. Follow all the below-given posts to show colored boxes in blogger posts and pages.

  • Go to your Blogger Dashboard.
  • Now go to Theme.
  • You will see customize, near that you will see an arrow. Click on that.
Add Colored Boxes in Blogger Customize Add CSS
  • Now you will see 5 options. Click on Edit HTML.
Add Colored Boxes in Blogger Edit HTML
  • Now press ctrl F. You will see the search box. Type </b:skin> or </style>. You have to try both terms. In some theme it will be </b:skin>. In some other themes, it will be </style>.
  • Now copy the following code and paste it before </b:skin> or </style>.
/* Material Color Box */
.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}{background:#03a9f4}{background:#4CAF50}{background:#F44336}{background:#ff9800}
  • Now click on save.
  • Now go to that post in which you want to add colored boxes. Edit that post in HTML View.
  • Now add the following code where you want to add colored boxes.
<div class="colorbox green">
This is the green box.
  • You can add your own content or words that you want to add in colored boxes.
  • Great, whenever you want to add just paste the HTML code in your post and you can add easily your boxes.

Colored Boxes HTML Code

HTML Code for Green Color Box

<div class="colorbox green">
This is the green box.

HTML Code for Red Color Box

<div class="colorbox red">
This is the red box.

HTML Code for Blue Color Box

<div class="colorbox blue">
This is the blue box.

HTML Code for Yellow Color Box

<div class="colorbox yellow">
This is the yellow box.

HTML Code for Orange Color Box

<div class="colorbox orange">
This is the orange box.

HTML Code for Pink Color Box

<div class="colorbox pink">
This is the pink box.

HTML Code for Purple Color Box

<div class="colorbox purple">
This is the purple box.

HTML Code for Cyan Color Box

<div class="colorbox cyan">
This is the cyan box.

HTML Code for Black Color Box

<div class="colorbox black">
This is the black box.

HTML Code for White Color Box

<div class="colorbox white">
This is the white box.

Available colors in Colored Boxes

We have added all popular colors in colored boxes. Right Now, There are 10 colors available in colored boxes.

Supported Colored BoxesSuitable for
GreenSuccess Massage
RedError Massage
YellowWarning Massage
BlueInformation Massage

If you want more colors please comment down your colors with its HTML Color codes. We will add it As Soon As Possible.

Video Tutorial: Add Colored Boxes in Blogger

If you can not understand the above steps then don’t worry. Watch our video tutorial to Add Colored Boxes in Blogger. And subscribe to our youtube channel for more interesting and amazing WordPress and Blogger Tutorials.

Wrapping It Up

We hope that this article will be helpful to you.

If you can not Add Colored Boxes in Blogger, please let us know in the comment section down below. We will try to help you ASAP. And if you found our article helpful, then please share this article.

Add Colored Boxes in Blogger

Leave a Comment

Share via
Copy link
Powered by Social Snap