30+ Blockquote Styles: Customize Blockquote in Blogger with CSS

Some amazing blockquote styles are provided here to customize blockquote in blogger. Basically, block quote style is a typographical element based on the HTML tag “<blockquote>”. We usually use it to quote some lines, paragraph or a block of text. Actually, block quote is used to highlight a piece of text from others. Therefore, we should use some eye catching blockquote styles to highlight and make it different.

Today I am going to provide some amazing and Stylish block quote styles. These designs are based on pure CSS. In fact, you can simply grab the code from here and paste it in your blog. You can choose your desired block quote style from the list below and follow the instruction to add it to your blogger blog. Also, I will provide a step by step guide for the entire process.

How to Apply Blockquote Styles in Blogger?

We have to use blockquotes for making our content more reader friendly, logical and informative. Actually, all latest third party Blogger templates come with a default blockquote design. If you don’t like that, this list will provide you some beautiful CSS blockquote styles. By using any of these styles, we can improve the outlook of our blog’s blockquote style. So let’s learn how to customize blockquote in blogger.

Step 1: At first, backup your template and sign in to your Blogger account and go to the “Theme” section. Now click on the “Edit HTML” button.

Step 2: Find the “<b:skin>…</b:skin>” and expand it.

Step 3: Scroll all the way down and find the ending “]]></b:skin>” code.

Step 4: Choose your desired blockquote style from the list below and paste it right above the “]]></b:skin>” as shown in the following image.

Step 5: Finally, click on the “Save theme” button and visit your blog to see that changed blockquote style.

Troubleshooting: If you see your customized blogger blockquote style is not same as you have chosen from the list below, the default style may be conflicting with the new one. In that case, here I am providing the basic troubleshooting.

1. Login to your blogger account and go to the Theme > Edit HTML and find the default CSS blockquote style of the template.

2. You have to comment (Disable) the entire default blockquote block by using /*…. Code ….*/ as shown above. Finally, click on the “Save theme” button and you are done.

Visit your blog again > Delete browser history and cache > reload your blog and you will see the newly applied blockquote style is showing properly. Now let’s choose our desired blockquote style for Blogger from the following list.CSS Blockquote Styles List for Blogger:

You can use any of the following CSS code to customize the default blockquote style of your blogger blog. In fact, these styles will also work for any other CMS or HTML pages too. So pick your desired style and make your blog more professional looking and eye catching today.

CSS Blockquote Style: 1

blockquote {font: 16px/24px Arial, sans-serif;text-align:left;color: #666;margin: 15px 10px;padding: 15px 10px;}
blockquote:before {background: #ddd;text-align: center;height: 25px;content: open-quote;float: left;line-height: 42px;border-radius: 25px;font-size: 24pt;color: #fff;vertical-align: -0.5em;position: relative;margin-right: 0.5em;display: block;width: 25px;}
blockquote:after {display: block;text-align: center;color: #fff;float: right;border-radius: 25px;vertical-align: -0.5em;content: close-quote;font-size: 24pt;line-height: 42px;background: #ddd;position: relative;margin-right: 1em;width: 25px;height: 25px;}
blockquote:hover:after, blockquote:hover:before {transition: all 350ms;background-color: #555;-moz-transition: all 350ms;-o-transition: all 350ms;-webkit-transition: all 350ms;}

It is truly an amazing and simple blockquote style for Blogger with hover effect. Actually, it will wrap your highlighted text inside two gray quotes. If you are using a clean template, I will recommend this one for you.

CSS Blockquote Style: 2

blockquote {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitetPGhsCG4fEeIckT2ITJ5LqG1BQWxbILMJWu3Mxoxdi7UfIjF5oOBd0y2pYjuh_TGpnLJV7-JwVMlUws109Rvgo5sbQYg_3WS-4F_BHJfMkQHd-d91Jidqlv3ZEPR9kKOInYWid6vVxE/s1600/bo-blockquote.png) no-repeat;
font-size:15px;text-align:left;color: #555;
border: dashed 1px #eee;margin: 25px 35px;padding: 20px 30px 30px 40px;}

Among many blockquote styles, it is very clean and lightweight design. Actually, the single quote sign will give a nice visual effect and highlight the text properly. Also, it will generate a dashed border around the text.

CSS Blockquote Style: 3

blockquote{border-left: 15px solid #c76c0c;font-family: Georgia, serif;font-size:15px;text-align: justify;background: #fff;line-height: 1.2;
display:block;margin: 0 0 20px;padding: 15px 20px 15px 45px;position: relative; font-size: 16px;color: #666;
border-right: 2px solid #c76c0c;box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;-moz-box-shadow: 2px 2px 15px #ccc;}
blockquote::before{font-size: 50px;position: absolute;color: #999;left: 10px;top:5px;font-weight: bold;content: "\201C";}
blockquote a{cursor: pointer;color: #c76c0c;text-decoration: none;background: #eee;padding: 0 3px;}
blockquote a:hover{color: #555;}

This amazingly designed blockquote style will improve the reading experience of your blog. It has a nice Shadow effect to gain more reader attention. For this reason, I will consider it is one of the best blockquote styles for blogger.

CSS Blockquote Style: 4

blockquote:before,blockquote:after{background:transparent;}
blockquote{line-height:normal;font-size:16px;color:#666;padding:12px 0 0 44px;text-align:left;font-style:italic;margin:10px 30px 20px;position:relative}
blockquote:before{color:#ccc;content:"\201C";line-height:1;font-size:85px;left:-5px;position:absolute;top:-5px;font-family:Georgia,serif;}

It is another simple blockquote design for your blog with a single quote sign on the left. Basically, it is using Italic font style but if you wish you can customize this as the way you want. In my opinion, this simple style will suit any type of blog.

CSS Blockquote Style: 5

blockquote{text-align:left;
border:1px solid #ededed;
padding:35px;font-size:15px;margin:10px 0;
font-family:'Cookie',cursive;color:#676767;}

It is a super simple blockquote style for blogger. The Cookie font generates a fancy but noticeable look in this design. Also, the full-width border will separate the highlighted text from others very smoothly.

CSS Blockquote Style: 6

blockquote:before, blockquote:after{content: "";}
blockquote{margin: 0 2em;font-size:16px;line-height:22px;text-align:left;quotes: "" "";border-left:3px solid #737e7e;padding-left:10px;}

A very few CSS line is making the magic for this design. Actually, this quoting style is designed for simplicity lovers. In fact, the design is free from any external style sheets by using few CSS properties.

CSS Blockquote Style: 7

blockquote {
background: #f9f9f9;margin: 10px 20px;text-align:left;font-size:16px;
border: 1px solid #d2d2d2;
color: #555;padding: 24px;font-style: italic;}

It is a hand picked blockquote design with Italic font style. I must say the color combination and the way to represent quote by using this style will be amazing. In fact, this style is generated smartly by using few CSS property.

CSS Blockquote Style: 8

blockquote {font-family: "Merriweather", Georgia, serif;font-style: italic;
padding-left: 35px;padding: 17px 58px 20px 55px;font-size: 16px;text-align:left;font-weight: 300;color: #333;background: #F2E4A0;margin: 21px 30px;}
blockquote:before {content: "\201C";margin-left: -35px;line-height: 1.33;float: left;font-weight: 700;font-style: normal;font-size: 25px;color: #111;}

This type of blockquote styles are very popular and widely used by many blogger template developers. In fact, it will generate a unique view with a small quote sign and a light background. Even you can change the background color if you wish based on the style of your blogger template.

CSS Blockquote Style: 9

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{padding:15px;margin-left:0;border:1px solid #d8d8be;
background:lightyellow;font-style:italic;text-align:left;font-family:Georgia;}
blockquote:after{font-family:FontAwesome;content:'\f10e';display:inline-block;font-weight:500;
font-style:normal;line-height:1;-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;color:#999985;margin-left:10px;}
blockquote:before{content:'\f10d';font-style:normal;display:inline-block;font-family:FontAwesome;
line-height:1;-webkit-font-smoothing:antialiased;margin-right:10px;font-weight:500;
color:#999985;-moz-osx-font-smoothing:grayscale;}

It is a highly customized and beautifully designed blockquote for blogger. Actually, the design is using font awesome icon for generating the quote signs. The text will remain inside double quote on a smooth background to improve the reader experience.

CSS Blockquote Style: 10

blockquote {
color: #8ABA9C;text-align:left;border-left:5px solid #8ABA9C;
padding: 21px;line-height: 20px;
margin: 30px 40px;float: left;}

If you are searching for a simple but eye catching design among many blockquote styles to customize the default one, you can choose this one. In fact, you can modify the color easily to generate a unique one for your blog.

CSS Blockquote Style: 11

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{ font-size: 16px; text-align:left; height: auto; margin: 0px; font-family: 'Roboto Slab', serif;
padding: 20px; font-style:italic; background: #F8F8F8; overflow: hidden;}
blockquote:before {content: "\f10d"; color: #00bf8f; margin-right: 6px; font-family: fontawesome;}
blockquote:after {font-family: fontawesome; content: "\f10e"; margin-left: 6px; color: #00bf8f;}

CSS Blockquote Style: 12

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background:#f7f7f7;padding:25px;border:1px solid #eee;text-align:justify;position:relative;
font-weight:500;clear:both;font-style:italic;}
blockquote:before{color:#6f6a6a;position:absolute;line-height:1;font-size:25px;z-index:0;
transition:.2s ease-in;font-family:FontAwesome;left:-18px;top:-21px;font-style:normal;padding:7px;content:"\f10d";border:1px solid #ddd}
blockquote:after{content:"\f10e";border:1px solid #ddd;position:absolute;font-size:25px;color:#6f6a6a;z-index:0;
font-family:FontAwesome;line-height:1;bottom:-21px;right:-18px;font-style:normal;transition:.2s ease-in;padding:7px;}

CSS Blockquote Style: 13

blockquote{margin:0 auto;position:relative;line-height:24px;padding:24px 20px 24px 45px;text-shadow:0 1px 1px white;
border:1px solid rgba(0,0,0,0.05);background-color:#F2F2F2;
background-image:
-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),
-webkit-repeating-linear-gradient(top,transparent 0%,
transparent 24px,rgba(139,207,173,0.7) 24px,
rgba(139,207,173,0.7) 25px);}
blockquote:before{content:'';position:absolute;top:0;bottom:0;left:20px;border:4px solid rgba(139,207,173,0.7)}
blockquote:after{background:rgba(242,246,193,0.9);z-index:-1;left:0;right:0;transform:rotate(2deg);border:1px solid rgba(170,157,134,0.7);}

CSS Blockquote Style: 14

blockquote {
border-left:2px dashed #FACC2E;color:#FACC2E;font-size:14px;
line-height:18px;font-style:italic;
text-align:justify;margin:15px 30px;padding-left:20px;
font-family:Georgia,"Times New Roman",Times,serif;}

CSS Blockquote Style: 15

blockquote{quotes:none;margin:1.5em 0;text-align:left;font-size:16px;}
blockquote a{color:#34495f;}
blockquote{display:block;border-left:6px solid rgba(2,2,2,0.4);border-radius:3px;position:relative;
color:#5c5544;background-color:#f2dca8;padding:20px 15px 20px 25px;margin:.75em 0;}

CSS Blockquote Style: 16

blockquote {
font-family: Georgia, serif;font-style: italic;background-color:#f5f5f5;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxTeu4od2Z7c6HFbi5tItP8JKrUqTQpgWcToLCIyxo7HV_u4YE-hq6U1rnskNpwZcEaCYzqciu2isu37VYMniEEiLMSEZnvNHvjxW58La0A-UoOVLVu052saJLyOYRKZsogajb_YoH5GZ6/s1600/quote-icon.png) 0 0 no-repeat;
padding-left:40px;padding-top:10px;margin:1em 0;}

CSS Blockquote Style: 17

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote { margin: 20px 0; color: #666; border: 1px solid #e1e1e1; padding: 20px; background: #f6f6f6; }
blockquote:before {text-align:left;margin-right: 3px; font-family: fontawesome; content: "\f10d"; color: #FF5353; }
blockquote:after { content: "\f10e"; font-family: fontawesome; margin-left: 5px; color: #FF5353; }

CSS Blockquote Style: 18

blockquote{text-align:left;position:relative;display:block;background-color:#FCE5AE;color:#555555;
border-radius:4px;padding:10px 15px;margin:.75em 0;}blockquote a{color:#34495e;}
blockquote:before{height:0;content:"";width:0;position:absolute;left:15px;bottom:100%;
border:7px solid transparent;border-color:transparent transparent #FCE5AE}

CSS Blockquote Style: 19

blockquote {background: #fafafa;font-style: italic;margin: 1em 1em 1.5em 1em;
font-size: 16px;padding: 2.1em 1.5em;
border-radius: 5px;border-left: 15px solid #1ABC9C;box-shadow: 11px 10px 0px #eee;}

CSS Blockquote Style: 20

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{position: relative;color: #888;line-height: 1.4;border-left: 0;padding: 60px 30px 45px;font-size: 16px!important;font-family: 'Droid Serif',serif;margin: 0;z-index: 1;}
blockquote:after, blockquote:before {color: #f3f3f3;line-height: 1;font-family: FontAwesome;position: absolute;font-size: 50px;transition: .2s ease-in;z-index: 0;}
blockquote:before {content: "\f10d";top: 0px;left: 0;}
blockquote:after {content: "\f10e";bottom: 0px;right: 0;}
blockquote:hover:after {color: #F5BB00;}blockquote:hover:before {color: #F5BB00;}

CSS Blockquote Style: 21

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{margin-left:0;font-style:italic;font-weight:500;font-size:14px;padding:0px;
padding-left:60px;margin:40px 0px;position:relative;}
blockquote:before {content:"\f10d";font-family:FontAwesome;text-align:left;font-size:19px;
line-height:20px;position:absolute;color:#fff;background:#eee;padding:10px;
left:0;top:0;}blockquote:hover:before {color: blue;}

CSS Blockquote Style: 22

blockquote{padding:20px 30px;text-align:left;
background: #999 no-repeat right;
color: #fff;font-size: 16px;line-height: 1.4;
border: 0;border-radius: 10px;margin: 0 30px 10px;display: block;
box-shadow: 11px 10px 0px #555;}

CSS Blockquote Style: 23

blockquote {position: relative;
display: block;border-left: 5px solid #21610B;
padding: 1.5em 1.5em 1.5em 3.5em;border-right: 2px dashed #21610B;margin: 0 0 1.5em;}
blockquote::before {position: absolute;font-size: 62px;font-weight: bold;
content: "\201C";line-height: 1;top: 10px;left: 10px;}

CSS Blockquote Style: 24

blockquote{border-left:5px solid #E7C297;background:#FFD4A1;
text-align:left;
margin:20px 30px;padding:20px;}

CSS Blockquote Style: 25

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background:#FF6052;margin-left:2em;padding:1em 1em;margin-right:2em;color:#fff;
border:3px solid #c94033;font-size:100%;box-shadow:5px 5px 0 rgba(0,0,0,0.1);}
blockquote:before {font-family:FontAwesome;content:"\f10d";font-style:normal;padding-right:4px;
text-decoration:inherit;color:#fff;font-weight:normal;}

CSS Blockquote Style: 26

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{margin:0 auto;background:#f9f9f9;padding:30px 40px;margin-top:1em;margin-bottom:30px;color:#888;position:relative;}
blockquote:after{position:absolute;font-family:"FontAwesome";content:"\f10e";font-size:16px;right:30px;
bottom:20px;font-style:normal;color:#aaa;font-weight:normal}

CSS Blockquote Style: 27

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background: #fbfbfb; border-left:5px solid #22B7AD; margin-left:0; padding:10px 15px; font-size:14px; color:#555; font-family: georgia; line-height:22px; font-style: italic;}
blockquote:before, blockquote:after{font-family:FontAwesome;display:inline-block; font-style:normal; font-weight:500; 
line-height:1;-moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; color:#777;}
blockquote:before{content:'\f10d'; margin-right:7px;}blockquote:after{margin-left:10px;content:'\f10e';}

CSS Blockquote Style: 28

blockquote {font-family: Georgia, serif;border-left:5px solid #FF7F01;line-height: 1.45;margin: 0.25em 2em;font-size: 14px;
font-style: italic;padding: 1.25em 40px;position: relative;background:#4b8baf;color: #ffffff;}

CSS Blockquote Style: 29

blockquote {font-style: italic;color:#fafafa;text-align:left;background: #22B7AD;
background: -moz-linear-gradient(top, #22B7AD 0%, #0e0e0e 100%);background: -webkit-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22B7AD), color-stop(100%,#0e0e0e));
background: -o-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);border: 1px solid #ccc;border-radius: 6px;
background: linear-gradient(to bottom, #22B7AD 0%,#0e0e0e 100%);background: -ms-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);
box-shadow: 1px 1px 1px #ccc;padding:20px 30px;}

CSS Blockquote Style: 30

blockquote {position: relative;color: #333;border: 5px solid #0ABCB1;border-radius: 100px;padding: 30px 60px;margin: 2em 60px 60px;text-align: center;font: 16px Cambria,Georgia,sans-serif;font-weight: 600;}
blockquote:before {display: block;border: 10px solid #21B028;position: absolute;background: none repeat scroll 0 0 #FFFFFF;content: "";height: 50px;width: 50px;right: 100px;bottom: -40px;border-radius: 50px;z-index: 10;}
blockquote:after {position: absolute;background: none repeat scroll 0 0 #FFFFFF;display: block;content: "";height: 25px;border: 10px solid #5A8F00;bottom: -60px;right: 50px;width: 25px;border-radius: 25px;z-index: 10;}
@media only screen and (max-width: 500px) {
blockquote {padding: 30px 20px;margin: 1em 30px 30px;font-size:12px;}}

Here was the complete list of some latest and stylish CSS blockquote styles with code. Feel free to use any of the above styles in your blogger blog (As well any other CMS). Although I have given the process to customize blockquote in your blogger blog and a troubleshooting, do not hesitate to ask for any further support. In addition, please share this post by using the following buttons to support my hard work.