How to Add Hover Effect in Your Blockquote- The Heart Shape!

This post is the answer of my  promised when I make an article on "How to Make Blockquotes Styles". If you found it interisting. This time, I will tell you that it will be more than interisting since  a hover effect is added to the  CSS codes. Have an overview  by clicking the live demo  below.

Live Demo

How to Add Hover Effect in Your Blockquote- The Heart Shape!

Step 1. Go to your Blogger Dashboard
Step 2. Hit the Template button (have a back-up of your template)
Step 3. Click the Edit HTML button
Step 4. Find or Control the code below

]]></b:skin>

Step 5. Just above it paste the code below

blockquote {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg42V0GrVD0JOa3qi7pgZpblbTMKCetysSSaqHxN832BzEab1gS6BQL6WIdogXNkJrzXOsv49LPqXLIOQkmetl4Hf2EbTqvjRsidYbC8cOYL-HdDr8yFhnD9K-pistUZNpnlzPYcel_geI/s1600/love+fireworks.jpg2.png) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#ff00ff;
font: bold 1.1em "Vivaldi", "Times New Roman", Times, serif;
border:1px ridge #ff0000;
}
blockquote:hover {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOQcI2sjHlNeevM5tRIkbmHSTDy7ER5MbS8gIgdLHjCY6QvrhZUbvTEXJlRtBv8ZBg_5ouLDktjq4xikn3PUEr8tzNdSCvYRkiO4FluiHLqWbVPtamQMxxmTZfCYK__seYvYNumFNooY/s1600/love+fireworks.png) no-repeat right bottom ;
color:#01DFD7;
font: bold 1.1em "Vivaldi", "Times New Roman", Times, serif;
-webkit-box-shadow: 0px -2px 35px #0101DF;
box-shadow: 0px -2px 35px #0101DF;
border: 1px ridge #0000ff;
}

blockquote p {
margin: 0;
padding-top:10px;

There are two set of CSS codes responsible for this tutorial:

• Blockquote - This is default setting of your blockquote. Click here for its customization.
• Blockquote:hover - This is the result of your blockquote when a you hover the mouse over it.
The explanation with regards to its border, background,  etc. is almost the same.

Step 6.  After customizing the above codes you may now save your template and you're done!

Also check these post:

• How To Make Sitemap Page In Blogger
• Adding Webkit- Box-Shadow to Menu Tabs and Side Bar Title
• HTML Encoder Widget Generator For Blogger

Hope you like this tutorial buddies. If you have some questions, feel free to leave at the comment section below...
Peace and More Blessings to Your Family!!!