A pretty text box for Blogger posts

In this article, I will show you how to create a beautiful text box.

To do this, you will need to add the following code in the theme settings, under Custom CSS:

.nice_textbox {
    padding: 10px;
    border-left: 4px solid black;
    font-style: italic;
}
    

Then, in blog posts, you can use the following syntax to create text boxes:

<div class="nice_textbox">
    <p>This is a nice textbox</p>
</div>
    

to achieve this result:

This is a nice textbox

If you need to add such a text box to the current blog post only, then you can edit the HTML code of the blog post and add the following lines, without modifying the custom theme CSS:

<style>
.nice_textbox {
    padding: 10px;
    border-left: 4px solid black;
    font-style: italic;
}
</style>
    

Below is a variation of the above CSS code I use for the photo credits at the end of some blog posts:

<style>
.photo-credit {
    padding: 10px;
    border-left: 3px solid #0076a1;
    font-style: italic;
    font-size: 80%;
}
</style>
    

In blog posts, you can use the following syntax:

<div class="photo-credit">
    <p>Photo credit by...</p>
</div>
    

The result looks like this:

Photo by Teng Yuhong on Unsplash