blockqoute

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 10 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?
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:
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.
I n 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.
<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 {
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;
}
This was my favorite style, I
found it on codepen, In this
example you can see mouse
hover effect which is looking
really elegant.
<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 {
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;
}
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.
<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 {
@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;
}
Example 4 will have cool circle
around quotation mark.
<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{
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;
}
This was an awesome
blockquote styleI found on
codepen,
<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{
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;
}
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?
How To Customize
Blockquote Style In
Blogger/Blogspot:
How To Customize
Blockquote Style In