How to Add Stylish HTML background change In Blogger

A blockquote is a quotation in a article or post, that stands out from the main text as a paragraph, or block of text. Using CSS, we can give a more professional look to our site or blog by adding a different style, background, color or font to our quotes.

This tutorial will show you how to customize blockquotes style in Blogger along with showing you 6 beautiful examples of customized blockquotes style.

How to add quotes to a Blogger post

How to Add Stylish Blockquotes In Blogger

In order to customize the blockquotes style in Blogger, you need to access the HTML of your template and add some code inside the head section. You would need to choose one of the styles suggested below and copy the code which is immediately after.

Step 1. From Blogger's Dashboard > go to Template > Edit HTML

Step 2. Click anywhere inside the code area and press the CTRL + F keys to search for this tag:

</head>

Step 3. Just above the </head> tag, copy and paste the code of the style that you would like to use:

Style 1

<style>
.post blockquote {
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 2px 10px 5px 60px;
line-height:1.7em;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSeGgk5DJFwOnicM_xQdWubRq3iZhVemyFSgTH-4oF36wyTZH6hhjSnUFjfTUTNPMRQuD_zLE4Fz3aPeBdwiYgZgT5wqzrUzJH6W7Uomssl5U5YEizWInXkstPnHuY2_5flrlowF7e0rNr/s1600/notepad1.gif) repeat-y top left;
border : 1px solid #ccc;
-webkit-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}
</style>

Style2

<style>
.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FC8E42;
border-radius: 240px 240px 240px 240px;
color: #333333;
margin: 1em 140px 80px;
padding: 70px 70px;
position: relative;
text-align: center;
font: 1.5em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FFBD54;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #5A8F00;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}
</style>

Step 4. Click on the Save template button to save the changes. And you're done!

I hope that you found this tutorial helpful in learning how to customize blockquotes style in Blogger. If you have any questions or suggestions, then please feel free to leave a comment below.