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...
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.
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 {
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
.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
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
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 {
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
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
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
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
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
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
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
.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
.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
.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 {
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
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
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
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
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
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
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.
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.
Great article Lot’s of information to Read…Great Man Keep Posting and update to the People..Thanks
thank you very much. really useful
Nice
thanks alot for this
Thank you!
Great Article very helpful for me
nice one dude, im using this on my site..
i’m new on building my own site
thank you very much..
really i like your collection 😉
Very Nice Post For Blockquote, Thanks For Shering Good Information with us
amazing. thanks for sharing this blockquote style
Well done, they’re all very nice.