With this tutorial we will be able to add colorful message boxes in blogger posts.

This is very simple customization and also a cool way to display important messages ,notices or any special info.

After the customization we can get similar type of message boxes with our own custom icon.

Step 1: Go to blogger.com and from the Dashboard select the blog you want to edit. Click on Layout –> Edit HTML.

Step 2: Select “Expand Widget Templates”.
Step 3: Search for the following:


Save the template.
The customization is done!
So now when ever we need to post any message just create a new message and use the following style to write.
Say our message is:
Hello hi this is classic tutorial blog!
so we shall post is as follows:

Remember to put that div name and you should see the changes.. If you can edit a bit more you may get more surprising results some thing like shown below.
To change the icon displayed just change the url as required for the tag


And to learn more you can always head to http://www.w3schools.com/css/css_examples.asp and make your hand dirty!

SoftwareDeveloper, iot, CreativeTechnologist, MobileDev. Love building stuffs