How To Add Hover Effect In Your Blockquote- The Heart Shape!

Another way of enhancing your blogging skills is to be familiar with the tutorial below on "How to Make Blockquotes Styles". If you found the other tutorial about blockquote interesting. This time, It will be more vibrant. So let's proceed...

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/AVvXsEjsixJC6SD-tRZkZcc-2Z7jGZGV4a5n6teOiiJ0K7H3_Dfrg__Ih28lcm0odvEMT0QRX93bIOdBgN8byPpLQEJxJM5ieNJepq9Ggrd_eJYXJ8-p8jl3EtNG2-oucLkO28R1d1ZQ34lUpn0/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/AVvXsEjGvAito6SREHEoHwZvyXDHO-o0dpNKabnvScXKrUO8vqnF5a8uRgE2r3Fi8wEDH-ZvaLwOQKXLlUZNI4IlASQtjmjYgebkCkbr72IXwDibQa0tS365nFtqHj6KCCVXKsUYNd5YmLNNw84/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 are:

• 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! 

 If you have some questions, feel free to leave a comment below.

Take care and Enjoy!