How To Customize Blockquotes In Blogger ?

We use blockquotes to show some quote, a specific sentence, phrases etc. So blockquote has its own importance in blogging and if you are a blogger who likes to present the content in an effective and attractive manner then all features of a template must be working good to ensure the attractiveness of the blog. Some templates have very good blockquotes presentation while some other only shows the simple quotes, some just shifts the quoted text a little bit without changing anything in it. So if you are not happy with the block quotes of your blog and want to customize them according to your choice then this tutorial is for you.

Recently i have created a testing blog where i was trying to resolve all the problems related with the blogger templates, so i chosen a template that is provided by blogger and while customizing it i found that its blockquotes are not looking attractive so i decided to make them look attractive by using the CSS code. So there is nothing to worry if your template is not showing an attractive quoted text, you can customize it to according to your needs as i have customized it in this template. Previously blockquotes in this template doesn't have any border so i added a small css code and now you can see the block quotes in this template is looking quite good if not very attractive.

You can customize your templates block quotes easily by using CSS.

So below are the easy steps that you can follow to customize your blogs blockquotes :

• First select any one of the style from the given styles.
• Then Copy the code of that style.
• Now log in to your Blogger Account.
• Then go to Dashboard >>Template >>Edit HTML.
• Now press CTRL+F and search ]]></b:skin>
• Now paste the copied code just above ]]></b:skin>
• Then Save your template and you are done.

Note: After the styles i have given the customizations tips that you can use to make these blockquote styles more suitable for your blog, so don't forget to read them.

Style 1: Blockquote With Border

Code:

blockquote {
margin:1em 20px;
border: 1px solid #619644;
padding: 10px;
font-family: Vollkorn, serif;
font-style: normal;
background: #ffffff
}

Style 2: Blockquote With Vertical Line On Left

Code:

blockquote {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #619644;
font-family: Vollkorn, serif;
font-style: normal;
background: #ffffff;
}

Style 3: Blockquote With Two Parallel Dotted Lines

* To Enlarge The Images Please Click On Them.

Code:

blockquote {
margin:.75em 0;
border:1px dotted #619644;
border-width:1px 0;
padding:5px 15px;
color: #000
font-family: Vollkorn, serif;
font-style: normal;
background: #ffffff;
}

Style 4: Blockquote With Changed Background Color

Code:

blockquote {
margin: 1em 3em;
padding: .5em 1em;
background: #58FAF4;
font-family: Vollkorn, serif;
font-style: normal;
}

Customizations:

•   To change the background color of blockquote replace the HTML color code shown in blue.
•   To change the font family simply change the font name shown in red.
•   To change the border color replace the HTML color codes shown in green.
•   To change the font style from normal to italic, simply replace the text 'normal' with 'italic' shown in orange.