10 stylish blog qutoe styles with css 2020
May 04, 2020
Customize
Blockquote in Blogger with CSS
based on pure CSS. In fact, you can simply grab the code from here and paste it in your blog. You
can choose your desired block quote style from the list below and follow the instruction to add it to
your blogger blog. Also, I will provide a step by step guide for the entire process.
So follow the required procedure
We have to use blockquotes for making our content more reader friendly, logical and informative.
Actually, all latest third party Blogger templates come with a default blockquote design. If you
don’t like that, this list will provide you some beautiful CSS blockquote styles. By using any ofthese styles, we can improve the outlook of our blog’s blockquote style. So let’s learn how tocustomize blockquote in blogger.
Step 1: At first, backup your template and sign in to your Blogger account and go to the “Theme” section. Now click on the “Edit HTML” button.
Step 2: Find the “<b:skin>…</b:skin>” and expand it.
Step 3: Scroll all the way down and find the ending “]]></b:skin>” code.
Step 4: Choose your desired blockquote style from the list below and paste it right above the “]]>
</b:skin>” as shown in the following image.
Step 5: Finally, click on the “Save theme” button and visit your blog to see that changed
blockquote style.
Troubleshooting:
If you see your customized blogger blockquote style is not same as you have chosen from the list below, the default style may be conflicting with the new one. In that case, here I am providing the basic troubleshooting.
🔃 Login to your blogger account and go to the Theme > Edit HTML and find the default CSS blockquote style of the template.
🔃 Login to your blogger account and go to the Theme > Edit HTML and find the default CSS
blockquote style of the template.
Note: You have to comment (Disable) the entire default blockquote block by using /*…. Code ….*/ as shown above.
CSS Blockquote Styles List for Blogger:
Block Quote Style 1 :
blockquote {
font-family: Georgia, serif;font-style: italic;background-color:#f5f5f5;
background: url(https://4.bp.blogspot.com/-apuX-
9ARUao/WYTQg7l4jVI/AAAAAAAAAHg/soRgkjsn0XEm_EKv3Phqepp4k-w8ppIFACLcBGAs/s1600/quote-icon.png) 0 0 no-repeat;
padding-left:40px;padding-top:10px;margin:1em 0;}
Output
Block Quote Style 2
blockquote {position: relative;color: #333;border: 5px solid #0ABCB1;border-radius: 100px;padding:
30px 60px;margin: 2em 60px 60px;text-align: center;font: 16px Cambria,Georgia,sans-serif;font-weight: 600;}
blockquote:before {display: block;border: 10px solid #21B028;position: absolute;background: none
repeat scroll 0 0 #FFFFFF;content: "";height: 50px;width: 50px;right: 100px;bottom: -40px;border-radius: 50px;z-index: 10;}
blockquote:after {position: absolute;background: none repeat scroll 0 0 #FFFFFF;display:
block;content: "";height: 25px;border: 10px solid #5A8F00;bottom: -60px;right: 50px;width:
25px;border-radius: 25px;z-index: 10;}
@media only screen and (max-width: 500px) {
blockquote {padding: 30px 20px;margin: 1em 30px 30px;font-size:12px;}}
Output
Block Quote Style 3
blockquote {font-family: Georgia, serif;border-left:5px solid #FF7F01;line-height: 1.45;margin:
0.25em 2em;font-size: 14px;
font-style: italic;padding: 1.25em 40px;position: relative;background:#4b8baf;color: #ffffff;}
Output
Block Quote Style 4
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background:#FF6052;margin-left:2em;padding:1em 1em;margin-right:2em;color:#fff;
border:3px solid #c94033;font-size:100%;box-shadow:5px 5px 0 rgba(0,0,0,0.1);}
blockquote:before {font-family:FontAwesome;content:"\f10d";font-style:normal;padding-right:4px;
text-decoration:inherit;color:#fff;font-weight:normal;}
Output
Block Quote Style 5
blockquote{padding:20px 30px;text-align:left;
background: #999 no-repeat right;
color: #fff;font-size: 16px;line-height: 1.4;
border: 0;border-radius: 10px;margin: 0 30px 10px;display: block;
box-shadow: 11px 10px 0px #555;
Output
Block Quote Style 6
blockquote {font-style: italic;color:#fafafa;text-align:left;background: #22B7AD;
background: -moz-linear-gradient(top, #22B7AD 0%, #0e0e0e 100%);background: -webkit-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22B7AD), color-stop(100%,#0e0e0e));
background: -o-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);border: 1px solid #ccc;border-radius: 6px;
background: linear-gradient(to bottom, #22B7AD 0%,#0e0e0e 100%);background: -ms-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);
box-shadow: 1px 1px 1px #ccc;padding:20px 30px;}
Output
Block Quote Style 7
blockquote{margin:0 auto;position:relative;line-height:24px;padding:24px 20px 24px 45px;text-shadow:0 1px 1px white;
border:1px solid rgba(0,0,0,0.05);background-color:#F2F2F2;
background-image:
-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),
-webkit-repeating-linear-gradient(top,transparent 0%,
transparent 24px,rgba(139,207,173,0.7) 24px,
rgba(139,207,173,0.7) 25px);}
blockquote:before{content:'';position:absolute;top:0;bottom:0;left:20px;border:4px solid
rgba(139,207,173,0.7)}
blockquote:after{background:rgba(242,246,193,0.9);z-index:-
1;left:0;right:0;transform:rotate(2deg);border:1px solid rgba(170,157,134,0.7);}
Output
Block Quote Style 8
blockquote{text-align:left;position:relative;display:block;background-color:#FCE5AE;color:#555555;
border-radius:4px;padding:10px 15px;margin:.75em 0;}blockquote a{color:#34495e;}
blockquote:before{height:0;content:"";width:0;position:absolute;left:15px;bottom:100%;
border:7px solid transparent;border-color:transparent transparent #FCE5AE}
Output
Block Quote Style 9
blockquote {background: #fafafa;font-style: italic;margin: 1em 1em 1.5em 1em;
font-size: 16px;padding: 2.1em 1.5em;
border-radius: 5px;border-left: 15px solid #1ABC9C;box-shadow: 11px 10px 0px #eee;}
Output
Block Quote Style 10
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{ font-size: 16px; text-align:left; height: auto; margin: 0px; font-family: 'Roboto Slab', serif;
padding: 20px; font-style:italic; background: #F8F8F8; overflow: hidden;}
blockquote:before {content: "\f10d"; color: #00bf8f; margin-right: 6px; font-family: fontawesome;}
blockquote:after {font-family: fontawesome; content: "\f10e"; margin-left: 6px; color: #00bf8f;}
Output
Tags Blogger
Subscribe Our Newsletter
