MyPremiumTricks Lab

Hi guys. Block quote is a piece of coding in a post or template which gives a smooth and different look to a specific text. The default block quote is ugly and does not give any professional look. In this post, I would show you how to create a block quote with hover effect!

How To Customize Blockquote?

• Go to Blogger > Template > Edit Template > And search for /b:skin
• Paste the following code just above it:

.post blockquote
{
font-size: 16px;
font-family: Times New Roman;
font-weight: normal;
font-style: bold;
background-color: dark green;
color: white;
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: black ;
color: white;
}
.post blockquote:active
{
background-color: CornflowerBlue ;
color: white;
}

• Save your template!
• Done!