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

Welcome To Gurusprovince.. We Aid Your Career!... Life Is All About Creativity! And That's What We Do Here At Gurusprovince! Gurusprovince? We Don't Give Up! We Only Rest When Tired!

Education Technology Editing Packs

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

» » Blogspot Tutorials » 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:

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

 

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!

NOTE:

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.

Categories: Blogspot Tutorials

0 Commments

How About A Comment?

Your Comment

SEARCH



DO YOU KNOW?

Tatiana Manaois is a 21 years old female Pop Singer born in California, United States on October 22nd 1996. Her Current US based birthstone is Opal & Tourmaline. Tatiana came to limelight by showing off covers for songs of top musicians.

« | »




css.php