stylish blockquote with hover effect for blogger

Block quote style with hover effect

Today i,m going to tell you that how to customized blockquote in blogger . Blockquotes are mostly used in
blogging tricks blogs so you can easily embed html codes in your blog posts with a new style .
Blockquotes are mainly used for writting some quotes or Codes .

Demo

if you want to add this please follow my steps.

Steps To follow

1. first goto your blogger account

2. then click on edit html

3. Now search for ]]></b:skin>

4. now paste the below code just above the ]]></b:skin>

/*****************************************
Haseebnet.blogspot.com post blockquote
******************************************/
.post blockquote
{
font-size: 15px;font-family: Verdana;font-weight: normal;font-style:italic;
background-color: #F2F1F1;
color: #000;
margin: 5px 10px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
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
{
background-color: darkgreen ;
color: #fff;
}
.post blockquote:active
{
background-color: CornflowerBlue ;
color: #000;
}

Thank you very much for visiting my blog and reading my post if you like my post then please share it with your friends