Friday, January 8, 2016

How to Customize the Block Quotes in Blogger

How to Customize the Block Quotes in Blogger

For most of our blog posts, we want a sentence or two to be emphasized as a main idea or thought. To make this happen, we can use the Blogger's function - block quote. However, the formatting of the block quote is very simple - it's just indented. Here's how we can use some CSS codes to accentuate our quotes.

Step by Step: Customize the Blogger's Block Quotes

1. On your Blogger dashboard, go to Template > Customize
2. On Blogger Template Designer, click Advanced (then scroll down) > select Add CSS
3. On the Text Box underneath the "Add Custom CSS", copy and paste the code below:

.post blockquote {
background: url(http://3.bp.blogspot.com/-GJboszsMJg4/VozmvuwzI4I/AAAAAAAAHVU/pFfr-22iiOw/s1600/quote-image.png) no-repeat top left;
background-color: #000;
border-bottom:dotted 1px #ffe066;
padding-left: 60px;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 15px;
font-family: 'Cookie', cursive;
font-size: 28px; }

Now your block quote should look like this:

How to Customize the Block Quotes in Blogger

Editing the CSS Code for Block Quotes

Now I will show you what to edit so you can change the style to match your blog's design.
  • change the #000; to replace the background color
  • delete the line background-color: #000; if you don't want a background color
  • delete the line background: url(http://3.bp.blogspot.com/-GJboszsMJg4/VozmvuwzI4I/AAAAAAAAHVU/pFfr-22iiOw/s1600/quote-image.png) no-repeat top left; if you don't need a background image
For the border:
  • to make the border all around the pages, change the border-bottom: to border:
  • replace the #ffe066 with the color you like for the border
  • change the dotted to solid(a straight line) or dashed (coupon lines)
For the padding:
  • adjust the pixels (60px and 15px) on the size that satisfies you
For the text style:
  • change the font Cookie to any web-safe font that you like (example, Pacifico)
  • change the 28px to the size of the font that you needed
Here's another example:

.post blockquote {
background-color: #444444;
border: solid 2px #ffe066;
padding: 15px;
font-family: 'Cookie', cursive;
font-size: 24px; }


And the code above will look like this:


That's it! Can you show me the styles of your block quotes? :)

No comments:

Post a Comment

Write your comment or message here.

Ads by Google