How To Customize Blockquote In Blogger

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

"Block quotes" are sections of text which are generally used to highlight quotes from other sources; they are usually indented from the main body of a blog posts and may also have a slightly different background color.
Ever wanted to change the look of blockquote ?

First of all, if you don't know what a blockquote tag is, then edit any of your previous posts and add this code to it (anywhere in the post):

<blockquote>Write your quotations here</blockquote>

Save the post, and check it out.

You will see that the text "Write your quotations here" is separated from your regular content. At Royal Tutor, just like the one below.

Write your quotations here

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) something like this:

blockquote {
...
...
... }

or this

.post-body blockquote {
margin: 1em 3em;
padding: .5em;
background-color: #f6ebc1;
}

Now you just have to change the code inside those curly brackets {....}

So to display your blockquote like this:

Style 1

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

Style 2

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }

Style 3

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

Style 4

blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

Style 5

blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }

Style 6

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNujHyKJew7KrVoRulYRjpYDB25KS13cHNoU9aNIfWSTPDJww0VRq6bc177gUtk9_IhS-elJFIF5IwCshA2kxjLqCuZ3v-5fEfLOgTiy5KQ1MSN8T6jH09itnKrXYp2k8F6X2iVId5u3o/s1600/owlb.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }

Style 7

blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp473DT1Osa0VuyLU_UWSF43P_W8UiYcfnS2Z_o6jaZsxZV92gkKkNQb7aqmheL4ig0pcpG-cvUUYWYiifDTPy_aU2IQd7GuRix8yP-nyS-NVvKP98AYj55yhq0AtaB4zaBsAlAXTSd0M/s1600/cdangular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }

Style 8

blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFxl54Cr_oeuVQJQgmEkd1g1uAYkyEJ0ywbrvHOlaaEZtTmIIgN6PJthwBoiBAnP2zcfDaudAIj0dpkniQcrR8PdAWwpEvM3t9vufERvIjbe-1xGXSKEoRSKi1xHNfe-whxf-AXQpVbrA/s1600/blockcpr.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

Style 9

blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuQ-8cdV4qTB4YqkVRmQL6ytC-zezWqgFK_L-VL90XjUAo9PiW7K6Al3YyLPZR9CXntlx5QG3HPw08WmnDo_RilAvY9Nb6MenmekSEvry7y19d1LccWjEQU1ocGifCbktSHb7OE0tE-xk/s1600/comma+side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }

Style 10

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhkzXcz6X9RSZzWAUhHLXInJJx2A-8-HEZaESasjRncOdxN41Eda0zmQUGS5Foq0k7sUE5q8dWbjgtrmBiWb5Q_0AS0eDgBFzIr2-fFCRGmKaVNB8XvRNMzvkPQxLYD82tuGzzawN6O8/s1600/greenbq.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

Customization:-
Important areas to be customized are bolded. Where,
# padding: It refers to the distance of the text from blockquote borders. Which goes in this order –> Top Right Bottom Left
# background :- This includes Blockquote background color and image used in it. The six digit value is the background color and image link is inserted in place of bolded text in this part-> url(Paste Image Link here)
# font :- It includes font style, size and type respectively. Match the colours with the code above for reference.
# color :- This refers to text colour. You can use a different font colour using our color chart
# border :- This refers to border width, style and colour respectively. # All other blockquotes can be customized in similar way.

NOTE: Blockquotes are universally defined for your blog, and therefore in all your blog posts they will appear exactly the same (although you can use different classes for different styles, but this is not recommended as it will affect your blog's loading time).