Cool Steps On How To Separate Codes And Quotes on Post Using CSS And HTML in Blogger

Cool Steps On How To Separate Codes And Quotes on Post Using CSS And HTML in Blogger

Hey guys!! Welcome to another Gurusprovince tutorial.

Today, we’re gonna be teaching you guys awesome Steps On How To Separate Codes And Quotes on Post Using CSS And HTML in Blogger.
On a flash back, when we added this quote, it appears like this:

Hi! Welcome to 360GPTech

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

.add {
position: relative;


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.
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!


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.

Thats all guys!!

If you encounters any error while making use of this tutorial, kindly make use of the comment box.

REMEMBER: Always visit for more interesting topics.

About Gurusprovince

Check Also

Blogspot Tutorials

[Blogspot Tutorial] Popular Post Widget

Contents hide 1 Popular Post Widget 1.1 Popular Post Round 1.2 Popular Post Square 1.3 …

Leave a Reply

Your email address will not be published.