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.
How to Add Hover Effect in Your Blockquote- The Heart Shape!
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(http://1.bp.blogspot.com/-F2518Ek6xZs/UfvEzEVQ0mI/AAAAAAAABaw/z6cmQnIzC6E/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(http://4.bp.blogspot.com/-wBGupuuOUkk/UfvFQ4ONT_I/AAAAAAAABa4/YgyF0YYHppQ/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.
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!!!
About the Author:
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
No comments :
Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.
Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.
Best Regards,
GOLDEN WORKS TV