Modernizing Your BlockQuotes -9 unique styles

Block quotes are a  selection of text that is pulled out and quoted in a larger typeface. They are a great way to attract attention to a particular point, especially in long articles.Most websites, especially if they are blogs, will come across the need for a block quote at one time or another. HTML provides us with the perfect element for such a task, the

The tag blockquote in html has a special beauty than any other tags by default. And when you use blockquote in your post, it gets more meaning than merely a text.


Hope You would also like to Read :
Increase your text size Widget
First letter of your post Big and Unique
Google friend connect in Various Forms 

Here i am collecting some of the best blockquote designs which i have found over the web ! Hope You like them :

Basics And Specification

W3C: Blockquote specs
Wikipedia: Blockquote
W3 Schools: Blockquote

#blockquote1 {
background: #f5f5f5;
border-left: 0.8em solid #ccc;
border-right: 0.8em solid #ccc;
font: italic 120% Georgia, "Times New Roman", Times, serif;
padding: 0.75em;
}

#blockquote2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

#blockquote3 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(http://i48.tinypic.com/2hnxcmo.jpg);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
line-height: 1.5em;
}

#blockquote4 {
width: 20em;
background: url(http://i49.tinypic.com/23tmpmh.jpg) top left no-repeat;
color: #030;
font-size: 2em;
line-height: 0.9;
font-style: italic;
padding: 0.5em;
margin: 0;
}

#blockquote5 {
background: #ffffcc;
border: 5px double gold;
border-width: 5px 0;
color: #CC6600;
font: bold 150% Arial, Helvetica, sans-serif;
  padding: 0.5em 0.75em;
text-align: right;
}

.blockquote6 {
background: rgb(0, 0, 0) none repeat scroll 0% 0%;
color: green;
}

blockquote7 {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}

blockquote8 {
color: #fff;
background-color: #111;
font-size: 0.9em;
padding: 10px 20px 20px 20px;
}
blockquote p {
margin: 0;
padding-top:20px;
}

#blockquote9 {
display:block;
font-family:Courier New;
font-size:9pt;
overflow:auto;
margin:5px 10px;
padding: 2px 15px 2px 25px;
background:url(http://i50.tinypic.com/raomxl.jpg) left top;
background-repeat:repeat-y;
}

Now adding to your Blogger :

• Chose Any of the above blockquote :
• Search for post.blockquote or some thing with blockquote in your Edit HTML tab.
• IT will be Like this :

#post.blockquote{  //starting bracket

-- your blockquote css is here --

}  //closing bracket

• Suppose you have chooses second block quote  (#blockquote2)
• Copy only css parts which is inside the opening and closing brackets like shown in image below :

And replace it with your original block quote css  in this way it will not interfere with existing post.blockquote in our template.