November 24, 2009

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

blinking bulb 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. I have already shared two tutorials namely 14 Amazing Ways To Customize Block quotes Style In Blogger and Blockquote Style with Auto Number List But this blockquote effect is exceptional! Just have a look of an example blockquote below.

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 Blogger

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

blockquote {
background: #000 url( no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;

blockquote:hover {
background: #000 url( no-repeat right bottom ;

blockquote p {
margin: 0;


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,


Let me know if any thing is left unclear. For customization guide read this post –> Customize Blockquote In Blogger

Need Quick Help within 24 Hours? ASK NOW

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

22 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Thanks a lot for the info. It´s been very useful. One question: Can this Hover effect be used when we have used two images for the "block quotes"?

    Congratulations, and thanks again.

  2. @Goviota

    Thanks for the remarks pal!


    You just commented here and I deleted your some how arrogant comment. Kinldy remove our copyrighted content from your blog - and attach footer credits on our template that you are using.
    Else we will be forced to contact Blogger for an immediate suspension or your blogger and Adsense account.


  3. Kewl! This helps a lot! Thanks!!!

  4. Awesome, Wonderful and Excellent.

  5. hi _mohd i really need your help i hope you help me. i made my blog before two month. my blog address is
    my promlem is when i am search for keyword bcs exam papers pune it shows like this ne computer science paper: download pune uni TOTAL collage listpu
    PUNE uni bcs exam papers|Pune uni Computer science exam paper|BCS exam results|BCS exam Notation|BCS Exam Tricks & Tips |MCA Guidance|C Programming ... - i want to show like pune uni bcs(computer scienc) exam paper after that description and after that address my website home page how can i do this please help me

  6. I did not understand your question pal!
    Do you want to show first the post title and then your Homepage's Title?

    If that is the case than do this,

    1. Inside your blog template, search for <title><data:blog.pageTitle/></title>
    2. Replace it with this,
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> | <data:blog.title/></title>

    3. Save your template and after few days, you will see that your post title is followed by your blog main title.

    Another thing,

    I have checked your meta's through your blog source file and found that they are as follows,
    pune university computer science exam papers,B.C.S,Software,Exam tips
    Kindly shorten the first keyword to at most three phrases.

  7. thanks lot tell me one thing that i want to use live write i like live writer can. how can i post something on specific page ex. i recently post exam papers through blog and now i want to post another exam papers through live write in same url or post this is possible

  8. @nil

    Yes it is. Windows Live Writer is really multi-functional.

    At the top-left-corner of your live writer click the File Menu and then choose Open
    There you will your blog title, simply click it to browse all published posts.

    Hope that would help!

  9. you like play with a hover...hmmm...and add a pic, that make heavy load right?

  10. i can't get the hover effect :|
    can u give me an exemple of code?

  11. I could not quote a code in may blog. The text was ok, but the code still working as I wrote the html code.
    Need some help:

  12. Update:

    Sorry for the inconvenience, use this code instead,

    .post blockquote {
    background: #000 url( no-repeat right bottom ;
    margin: 0 20px;
    padding: 20px 70px 20px 20px;
    font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
    border:1px solid #DDD;

    .post blockquote:hover {
    background: #000 url( no-repeat right bottom ;

    .post blockquote p {
    margin: 0;

    It will work like 123 now!! =D

  13. how to creats diferent comment like your blog...?
    sorry i can't speak english....

    please send me tutorial abaout thats.
    my e-mail:


  14. can you tell me how creats diferents comment like your blog?

    please send me e-mail about the tutorial.
    my email :

  15. I also would like to know how you got your comments to look the way they do. You have a lot of cool tricks available here, thank you for not keeping them all to yourself.

    Brian M. Connole

  16. @erwan @Brian

    I guess a comprehensive post on this will be best. I have added this query to my register :>

  17. I to have a blog
    It is a games blog
    so i want to get 2 blockquotes
    i want one blockquote for download link
    and other for description
    how can i do it
    i use pro blogger template

  18. salam, we cannot right click on the word? please fix?

  19. This is one of the amazing tips given article I have ever read online. Hope this bulb will work on my blog :)

    Admin of manual article submission

  20. This is great ! i'm sharing the tutorial on my blog

    Thanks !

  21. @Mohammad
    Block quotes are not working for my blog :(
    Please do me a favor.
    My blog:


  • choosing webhost for a blog

    Blogger Shortcodes

    Blogger Shortcode Plugin lets you redesign your blog with a simple one line code! It was once a dream!

  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • SEO Settings for blogger


    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit Our Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!


    Learn what it takes to become a successful entrepreneur and build a living online!