Add Block Quote For Blogger

Block quote plays important role if you writing some code in your post or highlighting something. Adding block quote in your blog is not difficult task. If your template has no coding for block quote, it can added manually by following the steps given below and if the codes for block quote exists, you can still customize it for 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, background to it. Block quote is used to show long quotation or extract different from main text in paragraph. It starts <blockquote>  and closing tag is </blockquote>. The desired Text is written between 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.

Please Visit My Hidi Blog also  अरविन्द जांगिड      कहानीघर,     आवाज                          "आपके आगमन हेतु आभार"

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 in to 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 tool bar, 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 block quote 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 in your suggestion. 

Arvind

Baca juga