How To Customize Blockquote Style On Blogger With CSS

This is another article for newbies at blogger. Blockquote is mostly used by technology niche blogs. Thy use it to show some special offer or news to users in a different style. You can use it on blogger blogs too. Here I use Blockquote for showing HTML/JavaScript codes, if you want to use it on your blog then read below article for easy tips on How To Customize Blockquote Style On Blogger With CSS.

How To Customize blockquote Styles with CSS ?

1, Go to blogger.com > Sign in,
2, Select your desired blog > Template ) Edit HTML,
3, Click on any side of coding and press Ctrl + F a search box will appear,
4, Type ]]></b:skin> in search box and press Enter,

5, Now copy below coding and paste it just above ]]></b:skin>

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

6, Click on Save Template That's it your blockquotes now have a unique style.
Customizations :Replace B9DF11 with your favorite color for Blockquote background. Replace 333333 with your favorite Text color for Blockquote. For changing curve of Blockquote decrease/increase 12px with your choice.

How To Add Blockquote Text In Blogger Blog Post ?

1, Go to blogger.com > Select blog > Create new post,
2, Now type any lines for blockquote style > Select that text with mouse cursor,
3, Then click on Blockquote icon as shown in below image

4, Publish your post now.

Last Words On Customizing Blockquote in Blogger

So friends and bloggers I thinks above article was explained all tips and methods to add and customize blockquote on your blogger blogs. If you want more stylish Blockquote box then leave comment or if you have any suggestion then let me know via comments form below.