1

20 Handpicked Stylish Blockquote CSS For Blogger

Do you searching for stylish blockquote CSS to highlight contents?

Adding block quotation is the best method to attracts viewers towards the important part of the article. Even it can be used to highlight promotions. It is not tough to add or replace blockquote style in blogger.

More...

Let's me tell you more about Blockquotes.

20 Handpicked Stylish Blockquote CSS for Blogger

The blockquote element defines “a section [within a document] that is quoted from another source. It is used to highlight primary and essential part of an article in the form of attractive designed paragraph or box. In another way, it can be used to highlight promos and suggestions, but it depends on the user that how he/she get the benefit of blockquotes.

Pro Bloggers suggest using Blockquote attract viewers. 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

Most of the blogspot users are new and don’t know about HTML and CSS. But everyone wants to make its blog template beautiful and attractive. Blogspot default blockquote style is not well designed for use. So, for newbies, I published this post with free blockquote CSS codes and How to Use tutorial.

20 Handpicked Stylish Blockquote CSS For Blogger

Let’s go ahead and choose the best and beautiful Blockquote styles from my collection. I found these designs from a different website. All of then are allowed to use on both personal or business website. After the list, I have explained little-by-little on how to use these Blockquotes CSS in Blogger.

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

This blockquote expand when user place pointer on it.

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 Add Blockquote CSS and Use it in Blogger Post

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 <blockquote> paragraph or anything else</blockquote>

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: Do not change Image links from my given 20 Blockquote CSS list expect from 11 blockquote CSS example.

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.

Muhammad Rizwan
 

My name is Muhammad Rizwan, and I am 16 years young self-called Blogger. I am a student of ICS and half-time blogger. I love to work on my website and sharing new things with worldwide peoples. I share blogspot tutorials, blogging tips, SEO tips, reviews and many other helpful articles on this blog.

Click Here to Leave a Comment Below 1 comments