Customize your Blockquote | Make it Cool & Professional

blockquote tag specifies a section that is quoted from another source. blockquote tag is supported in all major browsers.

Today we will tell you how you can customize your blockquote tag.

Steps to Customize your blockquote:-
1.Go to "Template".
2.Search for "post blockquote".If it is already there remove this code.
3. Now copy and paste the below code in the css section of the template.

.post blockquote {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background 200ms linear;
-moz-transition: background 200ms linear;
transition: background 200ms linear;
-webkit-backface-visibility: hidden;
background: none repeat scroll 0 0 #EEEEEE;
font: 12px/1.5 Monaco, "Courier New", Courier, monospace;
margin-bottom: 15px;
padding: 20px;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.post blockquote:hover {
background:#999;
}

4.Save the template.
5. Now you can use the Customized blockquote tag.
6. You can change the color before and after hovering by changing the code in red part above.

DEMO:

This is the example of Customized Blockquote. Try it now.