Customize Blockquote Style On Blogger With CSS

 

Blockquote is used to display certain text different from other to catch the eyes of the readers. It is used to show special message or idea by author. On Tech blogs they use blockquote to show soecial Tricks & Tips. Here at MBW we use to share codes with you. In this tutorial i will show you to customize blockquote in blogger using some simple Html & CSS. This blockquote can be customized to match your blog layout. So lets get started.

How To Customize Blockquote In Blogger ?

   1. Go to Blogger > Layout > Edit Html
   2. Now search for .post blockquote and delete it along with any more occurrences.
   3. For some blogger template that code might look like below.

.post-body blockquote { //Some Code }
OR
.post blockquote{  //Some Code }

   4. If you can't find above code then don't worry and follow up with below steps.
   5. Now search for ]]></b:skin> 
   6. Paste the below code just above ]]></b:skin> 

blockquote {
background: #B9DFF1;
margin: 0 10px;
padding: 20px;
color:#333;
border-radius:15px;
font: bold 0.9em  "Comic Sans MS", verdana;
line-height: 1.6em;
box-shadow: 4px 4px 10px #e3e3e3;
}
blockquote p {
margin: 0;
}

   7. Save the template and you are done.

How To Use Blockquotes ? 

   1. First write your message or whatever text you want to display inside blockquote.

   2. Now select that text (using mouse)

   3. Then Click on blockquote as show below.

Customizing Blockquote Code To Match Your Blog Template

The above code might not fit or look good on your blog. In order to make this code match your blog template change the following codes.

• Change #B9DFF1 to change background of the blockquote.
• Change #333 to change blockquote text
• Increase or decrease 15px to change the curve of blockquote