20 Handpicked Stylish Blockquote CSS For Blogger

Are you having trouble creating your own blockquote design for blogspot website?

If you are looking for stylish and well-designed blockquote CSS for blogger template, then you are in the right place. Creating your design can be quite a pain for new developers, and it's not really that much necessary to create your design when there are hundreds out there on the internet.

To save your time, I have handpicked 20 most stylish blockquote CSS codes from all over the internet. You can either use them as they are or can edit them according to your taste.

More...

20 Handpicked Stylish Blockquote CSS for Blogger

Adding stylish blockquote is, for sure, one of the best ways to catch the attention of the viewers to specific content in a post. This method is well known for highlighting personal opinions, ideas, or promotions.

There are thousands of Blogspot templates on the internet, and among them, there are different blockquote designs specific to the template design. Thanks to blogger facility of custom designing, user can easily change HTML and CSS to adjust template designs.

Pro Bloggers suggest using eye catching Blockquote to attract viewers attention. You can use it to highlight an important part of content or promotion in the article. You can customize or can make custom Blockquote styles using CSS. However, you use my CSS codes on your website.

Muhammad Rizwan

Blogspot has been a testing ground for new web developers for a long time. Most of the newcomers start from blogspot and learns how-know of programming languages like HTML and CSS.

Default templates are no good for a website, and blockquote designs are also pretty much useless. Though everyone wants to make their blog template beautiful and attractive from the very start of their work, but their little knowledge can make things pretty hard and its easier to use free designs from the internet.

20 Best Blockquote CSS Designs for Blogspot Templates

Below are 20 best blockquote designs I came across while searching on the internet. These are free CSS codes and are allowed to be used on both personal or business website.  You can find a guide on "how to use these codes in blogspot and sections to be edited" in the last section of this post.

Example#1

blockquote css example 1

blockquote {
background: #484B52 url(https://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
color: #C7CACF;
font: normal 1.105em Helvetica, verdana, serif, Georgia, “Times New Roman”;
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Example#2

blogger blockquote example 2

.post blockquote {
display:block;
background: #fff;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
position: relative;
font-family: Georgia, serif;
font-size: 20px;
line-height: 1.5;
color: #446578;
text-align: justify;
border-left: 15px solid #EBF2F8;
border-right: 1px dotted #EBF2F8;
-moz-box-shadow: -1px 2px 5px #ccc;
-webkit-box-shadow: -1px 2px 5px #ccc;
box-shadow: -1px 2px 5px #ccc;
}
.post blockquote:before{
content: “201C”;
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #8DACC0;
position: absolute;
left: 10px;
top:5px;
}
.post blockquote:after{
content: “”;
}
.post blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
.post blockquote a:hover{
color: #666;
}

Example#3

blogger blockquote css for blogger example 3

blockquote{
display:block;
background: #fff;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
position: relative;
font-family: Georgia, serif;
font-size: 20px;
line-height: 1.2;
color: #666;
text-align: justify;
border-left: 15px solid #c76c0c;
border-right: 5px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
blockquote::before{
content: “201C”; /*Unicode for Left Double Quote*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
position: absolute;
left: 10px;
top:5px;
}
blockquote::after{
content: “”;
}
blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
blockquote a:hover{
color: #666;
}
blockquote em{
font-style: italic;
}

Example#4

example 4 of blockquote css

blockquote{
background:#fff;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
border-left:5px dashed #ddd;
font-size: 20px;
}
blockquote :first-letter {
float: left;
margin: 5px 3px 1px 0;
font-family: Georgia;
font-size: 60px;
font-weight: bold;
}

Example#5

blockquote style exapme 5

blockquote {
background: #B9DFF1;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
color:#333;
border-radius:15px;
font-size: 20px;
font: bold 0.9em  “Comic Sans MS”, verdana;
line-height: 1.6em;
box-shadow: 4px 4px 10px #e3e3e3;
}

Example#6

css blockquote example 6

blockquote {
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
font-weight: 300;
border-top: 5px solid #77818d;
border-left: 5px solid #dfdfdf;
background: #f4f4f4;
color: #999999;
font-size: 20px;
font-style: italic;
line-height: 24px;
}
blockquote p {
margin: 0;
}

Example#7

quote style example 7

blockquote {
font-size: 20px;
line-height: 1.65em;
font-weight: 300;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
color: #fff;
border-top: 5px solid #77818d;
background: #77818d url(https://2.bp.blogspot.com/-efI8eumd0Ow/UdJQYLiab9I/AAAAAAAACP4/ePmgr9wVJew/s16/icon_blockquote.png) no-repeat 20px 25px;
}
blockquote p {
margin: 0;
}

Example#8

example 7 blockquote css

blockquote {
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
font-size:20px;
}

Example#9

example 9 css blockquotes

blockquote {
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#7d7e7d’, endColorstr=’#0e0e0e’,GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
font-size: 20px;
font-family: Candara, Calibri, Segoe, “Segoe UI”, Optima, Arial, sans-serif;
}

Example#10

example 10 of blockquote css

blockquote { background: url(https://4.bp.blogspot.com/-dklbBCzQ0is/UthVFDMFxYI/AAAAAAAAA7k/1a20NuQc1fU/s1600/paper1.png) repeat-y scroll 0 0 transparent;
border-radius: 5px;
margin: 0px 50px 0px 50px;
padding: 30px 30px 30px 50px;
line-height: 1.6em;
font-family:’Fondamento’, cursive, sans-serif;
font-size:20px;

}

Example#11

example 11 css blockquote

blockquote {
color: #333;
padding: 70px 30px 30px 50px;
background: #fafafa
/*The Image URL. You should replace it with your own */
background: #fafafa url(“https://www.bloggingvision.com/wp-content/uploads/2015/10/Logo-version-3.png“) no-repeat top center;
font-size: 20px;
}

Example#12

example 12 of blogger blockquote style

.post blockquote {
overflow:auto;width:250px;height:260px;
font-family: “Consolas”, “Courier New”, Courier, mono, serif;
color:#ffffff;
margin : 15px 35px 15px 15px;
padding : 5px 8px 15px 165px;
clear : both;
list-style-type : none; word-wrap:break-word;
background : url(https://1.bp.blogspot.com/-OU6w32TDAeU/U6maq-xyu3I/AAAAAAAAJWg/9BYLRAX_7lo/s1600/teacher.png);
background-repeat: no-repeat;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;
}
.post blockquote:hover{
background : url(https://4.bp.blogspot.com/-uyo8jJrCEmE/U6maq4BKt9I/AAAAAAAAJWc/rHNKC0BwSV8/s1600/hover+html+teacher.png);
background-repeat: no-repeat;
color:#F1F1F1;
}

Example#13

13 example blockquote style css

.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;
}

Example#14

14 blockquote example

.post blockquote {
background: linear-gradient(#B8DB29, #5A8F00) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font: 1.6em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #B5D928;
border-style: solid;
border-width: 50px 0px 0px 20px;
top: -50px;
content: “”;
display: block;
left: 50px;
position: absolute;
width: 0;
}

Example#15

blockquote css example 15

blockquote {
background-color: #f8f8f8;
overflow: auto;
width: 450px;
padding: 0px 25px 25px 25px;
color: black;
border: 2px solid #ca2129;
border-top-right-radius: 100px;
-moz-border-radius-topright: 100px;
-webkit-border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
-moz-border-radius-bottomleft: 100px;
-webkit-border-bottom-left-radius: 100px;
box-shadow: 1px 1px 4px #ca2129;
-moz-box-box-shadow: 1px 1px 4px green -web-kit-box-shadow:1px 1px 4px green;
-goog-ms-box-shadow: 1px 1px 4px green;
white-space: pre-wrap;
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
font-size: 20px;
}

Example#16
16 examples of blockquote styles

blockquote {
margin: 20px 30px 20px 30px;
background-image: url(https://lh5.googleusercontent.com/proxy/SOMq4FUJ6WEG2LGSjE5bTyAMMzzIovei1H9PgrkldrrsiLQVk7Dp1Bx8BXCPhWNf1EtVvPosMG3UfjnvZBzBRGik-mqBLGU0BV3OhGsL3aIhVC9P7xHji5Fcqmw=s0-d);
font: 20px/25px Serif, Times, Helvetica;
font-style: italic;
color: #FFF;
border: 1px ridge #0180C3;
border-radius: 20px 10px 20px 10px;
-moz-border-radius: 20px 10px 20px 10px;
-webkit-border-radius: 20px 10px 20px 10px;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
padding: 20px 20px 20px 20px;
}
blockquote:hover {
color: #eee;
-o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
float: left;
margin-right: 5px;
height: 17px;
width: 22px;
background: url(https://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
float: right;
margin-left: 5px;
margin-right: 0;
background: url(https://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
-o-transform: rotate(1090deg) scale(1.1);
-moz-transform: rotate(1090deg) scale(1.1);
-webkit-transform: rotate(1090deg) scale(1.1);
}

Example#17

17 example of blockquote css style

blockquote {
background: url(https://4.bp.blogspot.com/-W1mYmOOgIGw/V1FCMbeSPLI/AAAAAAAAAeI/mWxT2qK37PYD4XZ711T0sp-pb8nZFXCJwCLcB/s320/bg-quote1.png) no-repeat;
color: #a5a4a4;
font-style: italic;
margin: 30px !important;
padding: 0px 1px 0px 75px;
}

Example#18

18 example of blockquote css style

blockquote {
background: #fcfcfc;
border-left: 1px dashed #ccc;
border-bottom: 1px dashed #ccc;
border-right: 1px dashed #ccc;
border-top: 1px dashed #ccc;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
}

Example#19

19 blockquote example

blockquote {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;

}

Example#20

20 blockquote css example

blockquote {
background:
url(https://3.bp.blogspot.com/-6Cz5ZZSF770/V1FF0SioZ6I/AAAAAAAAAeU/-rv7t7Q_H7Q0SWb_wgi9n0vxbkOuM1M4wCLcB/s320/bg-quote3a.png) top center no-repeat,
url(https://3.bp.blogspot.com/-R47112ZnBE4/V1FF0ePq0EI/AAAAAAAAAeY/kazHLrP27ekR_ly_enF0nCVEOiq5DaDvgCLcB/s320/bg-quote3b.png) bottom center no-repeat;
color: #a5a4a4;
font-style: italic;
margin: 30px;
padding: 30px;
text-align: center;
}

How to Use Blockquote CSS in Blogspot Template

Blogspot developers have created a built-in function to add blockquote quickly with one click button. To add blockquote in blogger post, select the desired paragraph where you want to add blockquote style then click on the inverted comma option. The snapshot is given below. The syntax used to add a quotation is

paragraph or anything else

add blockquote css in blogger

Step 1: Login and Blog selection

Login to your blogger account and select any blog where you want to add blockquote CSS.

Step 2: Adding CSS Codes in Template

Now go to Template >>Customize.
Click on the advance in the left side menu and select add CSS. Now copy any CSS code from my given list of 20 blockquote CSS and paste it in the box. 

adding blockquote css in custom editor

Paste all the following codes in the Custom CSS box.

Bones Blockquote Example:

.post-body blockquote {
line-height: 1.3em;
}
.post blockquote {
background: #F2F1F1 url(Blockquote normal image here);
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
padding: 20px 20px 20px 50px;
color:#000000;
font: normal 0.9em “Consolas”, “Courier New”, Courier, mono, serif;;
-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}
.post blockquote:hover {
background: #F9F9F9 url(blockquote hover image URL here);
background-repeat:repeat-y;
color:#000000;
box-shadow: -1px -1px 12px 2px gainsboro;
border-radius: 15px;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Step 3: Adding Image links and saving changes

Remember to replace green text with your custom image links. However, it will not show you the side picture. Now save the template and click it out. If it does not work or have any problem, so feel free to drop a comment in the comment box.

Note: You can change image link from example 11, however other codes might cause error  if you mess in coding. If you know how to do changes then try making own blockquite CSS codes and share here, i would be happy to mention them in my post. 😊

Conclusion:

I hope you have chosen best Blockquote CSS for your website. I do my best and have collected these stylish block quotation CSS from different websites. Moreover, I have explained little-by-little steps to use blockquotes in blogger post. You can use these codes on both personal or business website freely.

If there is any problem in quotes CSS code then contact me. Drop the comment below and do share with your friends if this article has helped you.

Click Here to Leave a Comment Below 9 comments