In this article I will describe how to use the “quote text” function in Blogger blogs as well as how to customise its look.
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 “
” tag around the text. 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: 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. 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. 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). Font Style You can also bold or italicise the quoted text to really make it look different from the rest of your article. 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.
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!
