How To Customize “Block quotes” In Blogger With Mouse Hover Effect – The Blinking Bulb!

Posted by Android Market on -


blinking bulb




 

Interesting, isn’t it? Now let’s learn how to add similar effects like the blinking bulb effect above.

Add The Blinking Bulb Blockquote To Blogger


The CSS code to be inserted just above ]]></b:skin> is this,





blockquote {
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil3luor6NAvno3B_d3M_zGIHLvf4oP43x8OpbDFvZly2GUeEJCGzrzlP8kdrYDQfO_XfVj5bsZCtUgDMbIUib4oXAGn4r8apD-XvwK5kCY3m2xjgBu9pRjmcp_faC6FxYtnlfrDTOrZy0/s1600/bulb-off.gif) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;
}
blockquote:hover {
background: #000 url(http://4.bp.blogspot.com/_7wsQzULWIwo/SwrLJkLtM5I/AAAAAAAACUM/eYRiZpE_860/s1600/bulb-on.gif) no-repeat right bottom ;
color:#E0E089;
}


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





The second image in red link appears on mouse hover and the second image in green link appears when mouse is moved away from the blockquote.

Create Custom Blockquote Of Your Choice!

You can use similar effect by changing the background images, font colors, border colors or background colors etc. The first part in the CSS code above i.e blockquote { bla bla }represents the effect on normal view and the second code i.e blockquote:hover { bla bla }is responsible for the hover effect. So you can easily customize the font and border types and colors along with background colors to create a cool mouse hover effect.
I have shared some examples below which uses no image at all,



Categories: , ,

Leave a Reply