Stylish Blockquote for Blogger

Stylish blockquote is what most tutorial sharing bloggers expect.Here we are going to post a CSS codes to make a stylish block quotes.It will looks very fine and looks more attractive with hover effects.Here we are posting two different styles of customization.

This blockquotes make codes and quotes different from the normal text in a paragraph and from other text as visitors can copy easily.

Stylish Blockquote for Blogger

1.Login to Blogger

2.Edit Template.

3.Search for 

 ]]></b:skin>

Then above or before that code just copy and paste any one of below code.

Stylish Blockquote with solid Background

/** Blog4al stylish bloack quote**/
.post-body blockquote {
line-height: 1.3em;
}
.post blockquote {
background: #F2F1F1;
margin: 0 20px;
padding: 10px 20px 70px 20px;
border-top: 1px solid #DDD;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 0px solid #ddd;
font-size: 0.9em;
overflow:hidden;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font-size: 18px;
padding-top: 10px;
margin: 20px 5px 10px 5px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdq4tcNneUee5__L3AOZLyADzUdi0Qjr184yL4XOJnI-NL9ekZF5rfEH4p7ir42Xg_2Q8n7pJBpyaTTNgXI_FZbw5dc3PwPsLJKWw9zhyphenhyphenGJ8QTZewQujel6ciGHffarCkzm7JqG8psg8As/s400/quoteme.png") no-repeat scroll left top transparent;
color: rgb(105, 117, 124);
font-style: italic;
font-family: times,arial;
text-indent: 65px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

Stylish Blockquote with Hover Effect

This stylish blockquote completely will be also with hover effect as same as ours and you can use those code for your blog.

.post blockquote{
overflow:auto;
color:#333;
background:#FCFDCC;
margin:20px;
padding:10px 20px 10px 25px;
border:2px solid #333;
font-size:15px;
overflow:auto;
box-shadow:0px 0px 7px rgb(147,247,144);
transition:background-color .777s;
-webkit-transition:background-color .777s;
-moz-transition:background-color .777s;
-o-transition:background-color .777s;
-ms-transition:background-color .777s;
}
.post blockquote:hover{
box-shadow:0px 0px 7px rgb(247,147,144);
margin-top:20px;
overflow:auto;
background:#C7FDD2;
color:#333;
display:block;
overflow:auto;
text-decoration:none;
}

You can see from this coding's as the above hover effect is optimized for all browser like mozilla and opera.You will see this working fine.

More different kinds will be posted if requested in comments..