This tutorial will really enable you to create stunning and attractive blockquote for your blogger posts or websites. This blockquote will change color when mouse cursor is hovered over it.
Hover your mouse cursor on the blockquote below.
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
This blockquote can be added in the similar way as explained in my earliar posts. If you are new then read this part of my previous post –> Add and Customize Blockquote In BloggerThe CSS code to be inserted just above ]]></b:skin> is this,
blockquote {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.
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcC5Wa4dPMlEvBTNPwy4gI4oKW2R74lYp4X9ANpe_dKdwmjlItp0BY5-Yun-_I_crMfEwzgmxvg0Bqw55jmG3L_ZPnnsVm8HV81AQA0Zpgi3yrgNixvCAQ1aE8bavBasYSQyeLifeh5x4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinQEKuNFUYTNjPgUPdXazlx6nF6nA3JQwG78jKExq4txn0vECbK_YW0eYzT7lItqSCcjVtd57y-rn15CoaKCMvm8IQZCQHUgEuXMzD244ooQGSbEPYaHDDdzDT51LIUsnr3KiGUCmT8JI/s1600/bulb-on.gif) no-repeat right bottom ;
color:#E0E089;
}
blockquote p {
margin: 0;
padding-top:10px;
}
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,
Let me know if any thing is left unclear. For customization guide read this post –> Customize Blockquote In Blogger
- How to increase your RAM and make your computer
- Cool Tricks with google OR google gravity fun.
- Format your pendrive by autorun.inf
- Facebook's Recent Updates Trying to fight off with
- 10 Coolest Firefox Tricks!
- how to add chat feature to a blog
- SECRET CODES FOR NOKIA.
- Nokia N9 price in India |Nokia N9 meeGO full Specification.
- How to create a banner for your blog
- Nokia 500 unboxing
- Change Your IP In Less Than 1 Minute
- Speed up booting time
- HOW TO DELETE ADMIN PASSWORD WITHOUT ANY SOFTWARE
- Latest Facebook chat emotions. or How to use Like
- how to create a Bootable pendrive
- Microsoft word Shorcut keys
- How to speed up mozilla firefox or Speed up Mozilla
No comments:
Post a Comment