Tuesday, 30 May 2017

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 360GpTech 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: Al ways visit for more interesting topics.

No comments:

Post a Comment


About Us | Contact Us | Disclaimer | Terms And Conditions
All Rights Reserved 360GpTech
© 2017