Virtually all blogging platforms, including Blogger, have the “quote text” function. This is useful when you want to highlight sections from other texts or where you need to highlight information from within your own article. Quoted text can be customised to look different from the main body of your article and these differences make it stand out.

In this article I will describe how to use the “quote text” function in Blogger blogs as well as how to customise its look. /> id="more-20699">

How to Quote Text

Selecting text to quote is fairly easy. In Blogger, for example, you can “quote text” by selecting it and pressing the “quote text” button.

You can also select text to quote by adding the “

The default look is a simple indentation and this does not really help in differentiating it from the rest of the article. So, it is useful to change the look of the default quoted text.

Editing the Look of the Quoted Text

Editing the look of quoted text requires editing the basic HTML design of your blog. I covered how to edit this in my previous article on Blogger Favicons.

First, open your Blogger dashboard and select “Design”.

Next, on the main Blogger window select “Edit HTML”.

This will open up the HTML template editor. Here check “Expand Widget Templates” to ensure that all the HTML code for your blog is visible. 

Then scroll down and look for the section that contains the word “blockquote”. All the relevant options for the quoted text will go between “{” and “}”.

Customising the Look of the Quoted Text

The options I use for my quoted text on my personal blog TechComet are as follows:

blockquote {
margin:1em 20px;
background: #dfdfdf;
padding: 8px 8px 8px 8px;
font-style: italic;
}

This produces the following effect when I select text to quote:

The text is slightly indented, it is italicised and there is a soft grey background. These changes really make the quoted text more striking and it is easy to differentiate it from the main body of the article.

There are a number of different options you can add to your quoted text and I will discuss them below.

Margin

First, you will want to indent your text so that it is not in the same line as the rest of your article. You can do this by adjusting the number of pixels that the margin is from the rest of the text. I have set mine to 20px. Adjust this value as you see fit.

margin:1em 20px

Background Colour

Next you can change the background colour by adjusting the “background” tag. I have chosen a light grey colour. The colours in HTML code are represented by six “hexdigits”. You can obtain a list of colours and their corresponding hexdigit from here.

background: #dfdfdf

Padding

The amount of “padding” you use determines the distance that the quoted text is from the edge of the box created by the background colour. The smaller the number of pixels, the closer the text will be to the edge of the box.

The first figure is the distance (in pixels) from the top of the quote text box to the start of the text, the second figure is the right indent, the third figure is the bottom indent and the fourth figure is the left indent (In short, the 4 figures start from the top and go in a clockwise direction).

padding: 8px 8px 8px 8px

Font Style

You can also bold or italicise the quoted text to really make it look different from the rest of your article.

font-style: italic
font-style: bold

Borders

I have not chosen to add a border to my quoted text, however, if you wish you can do this by using the “border” tag. You must chose the thickness, style and colour of your border.

border: 2px solid #dfdfdf
border: 2px dotted #dfdfdf

Conclusion

In most modern blogs there are often sections that are quoted from other websites and blogs. To make your blog stand out and to add a “professional” touch to it, I would recommend spending some time and customising the look of your quoted text.

Let us know how text is quoted in your articles! /> />

Related Posts:

class='related_post'>

How To Change the Blogger Favicon

Embedding Google Font to Your WP Blog

3 Useful WP Plugins to Add a Floating Social Sharing Bar Beside Your Content

The Beginner Guide to Use GoogleCL

How to Style Up Your Quotes in Blogger originally published on Make Tech Easier (RSS)
Follow us at Facebook | Twitter