5 Examples To Customize Blockquote Style In Blogger

Blockquotes  are usually used to indicate the quotation of a section of a text from external sources or highlight someone's quotes, thou...

Blockquotes are usually used to indicate the quotation of a section of a text from external sources or highlight someone's quotes, thoughts in blog article.

These days bloggers are using Blockquotes on their blogs to make blog article stand out and grab the reader’s attention.

All blogging platforms have default styling for Blockquotes, but blogger platform gave us the power to modify the default blockquote style with something relevant to our template. So in this tutorial we will be sharing with you how to customize blockquote style in Blogger. We will present 5 examples of customized block quotes styles for that you can add to your blog using CSS.

We'll be using different pseudo-elements like   : before,  :after   for creating a unique look for the 5 examples.  

How To Customize Block quote Style in Blogger:

1. Go to Blogger Dashboard by visiting www.blogger.com

2. Next click on Template

3. Next click on Edit HTML

4. Search for </head> tag

Now choose one of the styles suggested below, copy the CSS code and paste it before 

 tag.

Done! Save your template!

Now whenever you want to add blockquote style in your blog post just copy that text which you want to appear as a blockquote and hit the blockquote icon as shown in the screenshot below:

Block Quote Style 1: Simple

You can increase the size of quotation mark just edit font-size: 4em; with you size.

BlockQuote Style 1 CSS:
<style>
.post blockquote {
background:#f9f9f9;
border-left:6px solid #ccc;
font-family: Georgia, serif;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
.post blockquote:before {
color:#ccc;
content:open-quote;
font-family: cambria, Georgia;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
.post blockquote p {
display:inline;
}
.post blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 10px;
}
</style>


BlockQuote Style 2: Hover Effect

In this example you can see mouse hover effect which is looking really elegant.

BlockQuote Style 2 CSS

<style>
   .post blockquote {
    text-align:left;
    font: 16px/24px Arial, sans-serif;
    color: #555;
    padding: 0.5em 10px;
    margin: 1.5em 10px;
    }
    .post blockquote:before {
    content: open-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: left;
    position: relative;
    border-radius: 25px;
    margin-right: 0.5em;
    vertical-align: -0.4em;

    display: block;
     height: 25px;
     width: 25px;
    }
    .post blockquote:after {
    content: close-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: right;
    position: relative;
    border-radius: 25px;
    margin-right: 1em;
    vertical-align: -0.5em;

    display: block;

    height: 25px;

    width: 25px;
    }
    .post blockquote:hover:after, blockquote:hover:before {
    background-color: #555;
    transition: all 350ms;
    -o-transition: all 350ms;
    -moz-transition: all 350ms;
    -webkit-transition: all 350ms;
    }
    </style>

 BlockQuote Style 3: Using Dashed Border and Background Quote Image

In this example dashed border have been added around the blockquote, Image for double quote and Muli font from Google web fonts library have been used. 

BlockQuote Style 3 CSS

<style>
.post blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0m2WYr_9npptkV6lTc151d-d1NCm018-4D2yyWKzmMQDD33xrUFAOckFp5-g-clxF-3FaMUBEwVMuHszAsvbqCjU8maPBxPu1KfNoNGG-8dYaWZyJpbReTfohUcjtavUNzgoMjtTRNgvi/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;
}
</style>

BlockQuote Style 4: circle around quotation mark

Example 4 will have cool circle around quotation mark

BlockQuote Style 4 CSS

<style>
.post blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}
</style>

BlockQuote Style 5:

This was an awesome blockquote style found on codepen, 

BlockQuote Style 5 CSS

<style>
.post blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify;
border-left: 15px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
.post blockquote::before{
content: "\201C"; /*Unicode for Left Double Quotes*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
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;
}
.post blockquote em{
font-style: italic;
}
</style>  

So we have learned how to customize blogger blockquotes style in blogger and I hope you found it helpful. 

Now tell me in the comments which one is your favorite blockquote style? 

Source: Shouters Club