Add Color Text Box in Blogger Post– Every bloggers tries to attract their visitors by making their blog look elegant. Apart from writing a good keyword rich perfect SEO friendly blog post, article design matters to a lot to appeal a visitor. A well design blog with beautifully curated contents makes visitors feel comfortable while reading a long descriptive article in a blog. One of the key tactics to beautify your blog post is by adding stylish html color text box with images or highlighted text with colored background.
In my previous tutorial, I wrote article relating How to Add Html Text box in Blogger Post and Color Code Box in Blogger Post. In this tutorial I came up with stylish HTML Color Text Box to beautify your blog post, where you can write appealing blog post with highlight text and colorful background. Also, you can add image inside the colorful text box to beautify your article. So, let’s dive in!!!
Why should you use Color Text Box in Blogger Post?
A beautifully curated blog post with colorful background distracts readers from getting bored. Blog Post with colorful text box increases readers focus more into the article resulting reader spends more time on blog which decreases bounce rate & boosts SEO.
Sample Colored Text Boxes for Blogger Post
<div style=”background-color: #FFF8C6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>Your Text Here </div>
<div style=”background-color: #FFF4D6; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;”>Your text here </div>
These were the sample color codes for the above two styles. For more styles you can check 10 stylish color Text Box for Blogger Posts.
How to add Color Text Box in Blogger Post?
To add the above colored text boxes in your blogger post follow the above steps:
Step 1: Login to your blogger dashboard and select your blog.
Step 2: Go to Posts >All > New Post > HTML.
Step 3: Paste color text box code in HTML area.
Step 3: Replace “Your Text Here” with your desired text.
◆ Customization: To customize above colored text box just just replace #FFF4D6 with your desired colored code. For various codes use this color code generator. Also, to add image inside color code just add image URL inside colored text box code area in HTML. You’re done!
◆ Last Word: Hope you are benefited by this article and learned something new. Let me know how this tutorial helped you to display color text box in your blog post. For any issues relating implementation of the code drop a comment below we are ready to help you. Also, if benefited please share with your friends in social media.