Amazing Examples To Customize Blockquote Style In Blogger/Blogspot

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. Also, you will have 6 cool examples of customized blockquote styles that you can use for your blog.

blockquote blogger
How to add quotes to a Blogger post

How to Add Custom Blockquote Style In Blogger

In order to customize the blockquote style in a Blogger blog, you need to access the HTML of your template and add some code inside the head section. The code can be found below each blockquote style provided below - choose a style that you like the most and copy the code to use it where indicated.

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


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<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(http://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(http://4.bp.blogspot.com/-uyo8jJrCEmE/U6maq4BKt9I/AAAAAAAAJWc/rHNKC0BwSV8/s1600/hover+html+teacher.png);
background-repeat: no-repeat;
color:#F1F1F1;
}
</style>

Style 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<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(http://3.bp.blogspot.com/-gNZ5r7KaLIE/T33PEnGXSJI/AAAAAAAABoo/cDcreY3-mPc/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>

Style 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<style>
.post blockquote {
 display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
    font-family: Georgia, serif;
  font-size: 14px;
  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;
}
</style>

Style 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
<style>
.post blockquote {
padding:10px 15px;
margin: 5px 15px;
border: 1px solid #E1E1E1;
background-color: #F6F6F6;
font-size: 15px;
font-family: Times;
}
.post blockquote:before {
content: "\201C";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}
</style>
Style 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
<style>
.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;
}
</style>
Style 6
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
<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!

So these are a few amazing examples to customize blockquote style in Blogger. If you have any questions or suggestions, then feel free to leave a comment below.

12 comments:

  1. your tips and tricks are amazing. i like your site. :)

    ReplyDelete
    Replies
    1. Thanks for the feedback! i'm glad you find it useful (:

      Delete
  2. Man, you are toooo freaking awesome. I am creating a post to credit. Keep up the great work please. :D

    ReplyDelete
    Replies
    1. Tried it first example http://naething.blogspot.in/2012/06/credits.html Is it possible to fit the characters inside the 'blackboard' ?

      Thanks for all the ideas and for this one in advance.

      Delete
  3. hi i would like to create a a blog template like yours. please help.

    ReplyDelete
  4. Wow, great! Can you make more examples?

    ReplyDelete
  5. Awesome information....!!

    IT is very useful...!!

    http://techgblog.blogspot.in/

    ReplyDelete
  6. I need more exaamples....!! Try to add some more new without your page name....!!

    THANKS>>>>>!!

    ReplyDelete
  7. wow..nice tipss...
    It is very usefull...!!
    http://www.hdphotosonly.blogspot.com

    ReplyDelete
  8. I liked ur tips but i applied some tips on my blog nothing happened ...Help me plz plz

    ReplyDelete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted.