How To Separate Codes & Quotes on Blog Post Using CSS & HTML?

Hi readers,

I hope you're all good. What I am, today, going to share is, how can you separately add codes and blockquotes. I mean to say, on my blog, whenever I add any quote, it appears like this:

Hi! I'm a quote.

But whenever I add any code (let it be CSS, JavaScript or HTML), then it seems like this:

<style>
.add {
position: relative;
}
</style>

So, how I do this? Isn't this interesting to know?

Of course, it is. It also helps your visitors to identify codes & quotes correctly, I know they can, but...

Now, if you have questions about how we are going to do this task, then let me tell it to you in simple language. By the way, if you're not interested in knowing how this works, you can scroll and get the customization. :)

How We're Going To Do This?

In HTML, there's already a separate container for codes and for blockquotes, we know, that's <blockquote>.

In these so many years, bloggers, and of course writers are using <blockquote> for both of their purposes. For quoting their codes and for quoting their quotes.

What we will do is, we're now going to use <pre> for codes and <blockquote> for quotes. 

You try this shortcode too:
HTML, CSS & JS Blockquote Shortcode for Blogger!

What extra you're getting here is, style. Using the codes or say CSS given below, you'll be able to add a simple style for code blockquotes. 

Now you know how we're going to get all this done, let's start implementing it!

How To Implement This Change?

Note: Please keep in mind, from now, you'll be using <pre> instead of <blockquote> in your posts.

The way to do it is simple. If you don't know how to get this done, you can see these steps:

1. Write some text in the "Compose" section of the blog post writer;
2. Now, you need to enclose that text using <pre> and </pre>

And for making this look classy, you'll need to use the following steps:

• Go to Blogger Dashboard > Template > Edit HTML
• Now, search for ]]></b:skin> and add the code given below above it:

pre {
white-space: pre-wrap;
line-height: 1.5em;
text-align: left;
background: #ededed;
padding: 18px;
overflow-wrap: break-word;
}

• That's all. Click on the save button, and you're good to go!

Read More: Add Facebook Messenger Button On Your Blog!

Final Words

I hope this helped you. Using <pre> for codes is not just really a way to stylise the codes, but it also shows that you've got the correct knowledge of HTML. So from now onwards, remember that you have to use <pre> for codes and <blockquote> for just quotes.

Jai Hind! :)

Share this post