How To Use Blockquotes And Content Boxes in Your Blog Posts

Blockquote plays an important role if you writing some code in your post or highlighting something. Adding block quote in your blog is a not difficult task. If your template has no coding for block quote, it can be added manually by following the steps given below and if the codes for blockquote exists, you can still customize it for a better layout. Now understand that What is Block Quote and how it works. Block Quote is a Tag (You can find out more information in my previous post Here ). Blockquote <blockquote> tag defines a quotation, Most of Popular Browser recognize it and shows Text under blockquote differently as space, a background to it. Blockquote is used to show long quotation or extract different from main text in a paragraph. It starts <blockquote>  and closing tag is </blockquote>. The desired Text is written between the opening tag and closing tag. if I want to write "Desired Text" under Block Quote, the codes are

<blockquote> Desired Text </blockquote>

Now look an example of my another blog's Link that I have added under blockquote.
The above Links are under Block Quote tag. 

Adding Block Quote in Template  If your template has no codes for block quote, You can easily add into your template. Follow the instructions.

1. Log in to Blogger Dashboard >>Design>>Edit HTML
    Now Search out (Cntr+F, for browser search)  ]]></b:skin>
2.  Copy the codes given below and paste just before the ]]></b:skin>in your blogger
      template and save it. 

blockquote {background: #cccccc;margin-left: 10px;margin-right: 10px;margin-top: 5px;margin-bottom: 5px;padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;width: 450px;height: auto;border: 2px dotted #FFCC66;text-align: left;font-style:italic;color: #6e6e6e;}

Now use block quote by clicking blockquote sign in post toolbar, see in image
or add the codes given below in HTML area of post start from <blockquote> and end with </blockquote>

<blockquote>
Desired Text that you want to add.
</blockquote>

You have added blockquote to your template and ready for use. Now, Learn how to customize it. 
1. Replace #cccccc; with suitable background color Hex value (See Color Picker)
2. If you want to add background image, replace background: #cccccc; with given codes

background: #dfdfdf url(Your Desired image URL goes Here) top left no-repeat; 

3. You can change margin, padding, and font according to your layout. Finally,  If you have any

     question, Please leave your comment or e-mail me with your suggestion