2

How do I write good-looking dialogue in a Blogspot article? There doesn't seem to be a way of doing it in "editor mode", so I'm hoping there's some convenient HTML command for it. I'm envisioning something like this (created in paint), but I'm open to suggestions:dialogue

EDIT: I tried both ways you suggested. Here's the article:

blah blah

<div style='display:inline-block; width: 30%; margin-right: 2em;'> 
Person A </div> 
<div style='display:inline-block; width: 60%; margin-right: 2em;'> 
I am saying words ... whatever words person A is saying ... </div> 
<br /> 
<div style='display:inline-block; width: 30%; margin-right: 2em;'> 
Person b </div> 
<div style='display:inline-block; width: 70%; margin-right: 2em;'> 
I am saying words ... whatever words person B is saying ... </div>

blaaaaah

<div class="nameText"> 
Person A </div> 
<div class="dialogText"> 
I am saying words ... whatever words person A is saying ... </div> 
<br /> 
<div class="nameText"> 
Person b </div> 
<div class="dialogText"> 
I am saying words ... whatever words person B is saying ... </div>

blah

Here's how it turned out:

screenshot

Here's the entire CSS field.

.profile-img{
height: auto;
width: 240px;
}
.goog-inline-block.dummy-container div, .goog-inline-block.dummy-container div iframe ssyby, .goog-inline-block.dummy-container div iframe{
width: 32px !important;
}
nameText {
    display:inline-block; 
    width: 30%; 
    margin-right: 2em;
}
dialogText {
    display:inline-block; 
    width: 60%; 
    margin-right: 2em;
}

By the way, if there's a way to make this work, can something be added to nameText to make it italic by default?

EDIT: Added the dots to the CSS so it's .nameText and .dialogText. Here's how it turned out:

screenshot2

1

Blogger does not provide any direct support for this. But you can achieve it by switching to the Edit HTML mode of the post editor, and putting some extra control HTML code into your post.

There are two HTML approaches: tables, or using divisions with in-line blocks. I recommend the latter, because it gives you more options for readers who use mobile devices: it's likely that you need to consider how the dialog should look for them as well as for readers who use a PC.

The following would be my starting point for such code. But depending on how you want it to look on narrow screens, I might change it and assign actual pixel widths (chosen to sum to less than the post-body width used in non-mobile) instead of percentages.

<div style='display:inline-block; width: 30%; margin-right: 2em;'> 
Person A </div> 
<div style='display:inline-block; width: 60%; margin-right: 2em;'> 
I am saying words ... whatever words person A is saying ... </div> 
<br /> 
<div style='display:inline-block; width: 30%; margin-right: 2em;'> 
Person b </div> 
<div style='display:inline-block; width: 70%; margin-right: 2em;'> 
I am saying words ... whatever words person B is saying ... </div>

That said, there is an improvement to this, approach.

Rather than repeating the formatting information over and over, declare a couple of styles, and add the CSS for them to your template (info about how to do this). Then you simply add calls to those styles to your blog-post content.

The styles might be

.nameText {
    display:inline-block; 
    width: 30%; 
    margin-right: 2em;
}

.dialogText {
    display:inline-block; 
    width: 60%; 
    margin-right: 2em;
}

Then the HTML edits you need to make to your posts are a lot simpler:

<div class="nameText"> 
Person A </div> 
<div class="dialogText"> 
I am saying words ... whatever words person A is saying ... </div> 
<br /> 
<div class="nameText"> 
Person b </div> 
<div class="dialogText"> 
I am saying words ... whatever words person B is saying ... </div>
  • Tried this, see edited OP. – Blrp May 6 '16 at 18:39
  • 1
    You are forgeting the "." in front of the class names in the css part – Tiberiu C. May 7 '16 at 5:09
  • Tried again, see edited OP. – Blrp May 8 '16 at 17:51
1

You can try this HTML code:

<p> Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph 
</p>

<table style="width:80%", align="center">
  <tr>

  </tr>
  <tr>
    <td valign="top">Person A</td>
    <td>123 456 789 012 123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012</td>
  </tr>

  <tr>
    <td><font color="white">_dsfsdfssd</font></td>
  </tr>

  <tr>
    <td valign="top">Person B</td>
    <td>123 456 789 012 123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012123 456 789 012</td>
  </tr>

</table>

<p> Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph  Paragraph Paragraph 
</p>

The result should be something like this:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.