Thursday, February 21, 2013

Stylish Block quote with hover effect for blogger

Friends, Now i share some important trick to customize your block quote with hover effect. It make your blog’s more stylish. Do you want to install its on your blogger?…. Just follow this post…

Go to your Blogger

Select Template option

Click on Edit HTML

Find (Ctrl+F) code ]]></b:skin>

Copy below code and paste it before ]]></b:skin>

blockquote {
background: #484B52 url(https://lh3.googleusercontent.com/-udEdd2Lzto0/USZP7AhKOJI/AAAAAAAAKE4/bpq42cQJtNM/s509/masterhacksblockquite.gif) ;
background-position:left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 12px Serif, Times, Helvetica;
font-style: italic;
border: 2px dotted lightgrey;
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 p {
margin: 0;
padding-top: 10px;
}

blockquote:hover { background-color: darkgreen ;
color: #FFFFFF;
font-size:14px;}

.post blockquote:active
{
background-color: CornflowerBlue ;
color: #000;
}