5 Examples To Customize Blockquote Style In Blogger And WordPress

Customize Blockquotes Style In Blogger And WordPress

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

Now day's every blogger started to using it on their blog to make blog article stand out and grab the reader’s attention.

Usually all blogging platform has a default styling for Blockquotes, but we should modify a default styling with something in relevance with your theme/template. So, this tutorial will show you how to customize blockquote style in Blogger and WordPress. along with it I'll present 5 stylish examples of customized blockquotes styles for your blog using CSS.

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

Many bloggers have a curiosity to know Is there an advantage or impact for SEO of blockquotes?

No! I don't think so, there are many probloggers uses blockquote on their blog and I haven't seen any example that tells me it can heart SEO. but it actually help you to rank well on Google. What do you say about it?

How To Customize Blockquote Style In Blogger/Blogspot:


To add customized blockquote style in blogger just navigate to Blogger Dashboard >> Template >> Edit HTML and Search for </head>
 
Now choose one of the styles suggested below and copy the CSS code and paste it before </head> 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 icon as shown in below screenshot:

Blogger Blockquote

 

How To Customize Blockquote Style In WordPress Themes:


It's quite simple to add blockquote style in WordPress themes, you need to add the following codes to style.css or custom.css file of your theme. You can do this with another way just go to Appearance » Editor in your WordPress admin or edit.

Now, pick out on of the styles suggested below and design your blog/website for a better user interface.

wordpress blockquote

 

#BlockQuote Style 1: Simple

 

 In this example I have used Unicode for left double quote. you can increase the size of quotation mark just edit  font-size:4em;  with you size.

blockquote

BlockQuote Style 1 For Blogger:


<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 1 For WordPress:

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

#BlockQuote Style 2: Hover Effect


This was my favorite style, I found it on codepen, In this example you can see mouse hover effect which is looking really elegant.

Blockquote With Hover Effect
  

BlockQuote Style 2 For Blogger:


   <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 2 For WordPress:

 

blockquote {
text-align:left;
font: 16px/24px Arial, sans-serif;
color: #555;
padding: 0.5em 10px;
margin: 1.5em 10px;
}
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;
}
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;
}
blockquote:hover:after, blockquote:hover:before {
background-color: #555;
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;


#BlockQuote Style 3: Using Dashed Border And Background Quote Image

 

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

blockquote styling with dashed border

 

BlockQuote Style 3 For Blogger:


<style>
.post blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background:url(https://lh5.googleusercontent.com/-fTjvw5r8Sfg/VQfAuZQI96I/AAAAAAAABBU/uGNOHt8jNR8/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;  

</style>

BlockQuote Style 3 For WordPress:


blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background: url(https://lh5.googleusercontent.com/-fTjvw5r8Sfg/VQfAuZQI96I/AAAAAAAABBU/uGNOHt8jNR8/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;  

 

#BlockQuote Style 4:

 

Example 4 will have cool circle around quotation mark. 
 
blockquote

 


BlockQuote Style 4 For Blogger:

 

<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 4 For WordPress:


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;
}
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%;
}
blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}

#BlockQuote Style 5:


This was an awesome blockquote styleI found on codepen


awesome blockquotes


BlockQuote Style 5 For Blogger:


<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>  

BlockQuote Style 5 For WordPress:


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

Final Words!

So, this was the complete tutorial on how to customize blockquotes style in Blogger and WordPress. and I hope that you found it helpful and I’m sure it will benefit you a lot.

If you have any query's, or if I missed anything in this article please let me know, I would love to hear from you :)

Now tell me which is your favorite blockquote style? 

COMMENTS

BLOGGER: 18
Loading...


Name

404 Alexa Alexa Ranking Backlink Blockquote Blogger Blogger Templates Blogger Tricks Blogger Tutorials Blogger Widgets Blogging Mistakes Blogging Tips CSS Download How To Image Optimization Infographics Internet Make Money Online Plagiarism Plagiarism Checker Privacy Policy redirection SEO SEO Tips Social Media Tools Traffic Tips WordPress YouTube
false
ltr
item
Shoutersclub : 5 Examples To Customize Blockquote Style In Blogger And WordPress
5 Examples To Customize Blockquote Style In Blogger And WordPress
Usually all blogging platform has a default styling for Blockquotes, but we should modify a default styling with something in relevance with your theme/template. So, this tutorial will show you how to customize blockquote style in Blogger and WordPress.
https://2.bp.blogspot.com/-88kVVBzpY1g/VQgIHr_TEzI/AAAAAAAABCU/8kAL9x4r9NY/s1600/Blockquote.png
https://2.bp.blogspot.com/-88kVVBzpY1g/VQgIHr_TEzI/AAAAAAAABCU/8kAL9x4r9NY/s72-c/Blockquote.png
Shoutersclub
https://shoutersclub.blogspot.com/2015/03/customize-blockquote-style-in-blogger-and-wordpress.html
https://shoutersclub.blogspot.com/
https://shoutersclub.blogspot.com/
https://shoutersclub.blogspot.com/2015/03/customize-blockquote-style-in-blogger-and-wordpress.html
true
8381117760632491081
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy