Adding dialogue in Blogger

This is a WordPress site, but I used to use Blogger. One day I wanted to create dialogue in a Blogger post, and I realized it wasn’t as straightforward as I hoped.

In Pages, creating dialogue is pretty straightforward:

Person 1: How’ya going?

Person 2: Fine. You?

(I’m not Australian, I just love the Aussie greeting). In Pages, I created the above effect using List Styles, which makes it easy to go back and forth between the speakers with a simple function-key shortcut instead of indenting, retyping, and recoloring their names every time.

I wanted to do something similar in Blogger, and here’s the solution I found:

Go to your Blogger Themes, “Customize”, and choose the “Advanced” menu. At the bottom, choose “Add CSS”. Here’s where you can add colored bullets like the ones shown above. Adjust the indents and other settings to fit your needs.

.person1Bullet {
display:inline-block; 
    width: 8%;
    min-width: 100px; 
    margin-right: 10px;
    margin-left: 10px;
    color: blue;
    vertical-align: top;
}
.person1Text {
    display:inline-block; 
    width: 80%; 
}
.person2Bullet {
    display:inline-block; 
    width: 8%;
    min-width: 100px; 
    margin-right: 10px;
    margin-left: 10px;
    color: red;
    vertical-align: top;
}
.person2Text {
    display:inline-block; 
    width: 80%; 
}

Then, go back to your blog post and open it in HTML mode. Add the style tags you created to give the dialogue the correct formatting:

<div class="person1Bullet">
Person 1:</div>
<div class=“person1Text”>
How’ya going?</div>

<div class="person2Bullet">
Person 2:</div>
<div class=“person2Text”>
Fine. You?</div>

This solution is not as efficient as List Styles in Pages, but at least it reduces the formatting to a simple copy and paste for each line of dialogue.