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(http://2.bp.blogspot.com/_7wsQzULWIwo/SwrLJYGc77I/AAAAAAAACUE/-dlubJwo7Ts/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,




 

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





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 ▼
PLEASE NOTE:
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.

    ReplyDelete
  2. @Goviota

    Thanks for the remarks pal!


    @Ahmed

    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.

    THIS WAS THE LAST WARNING!

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

    ReplyDelete
  4. Awesome, Wonderful and Excellent.

    ReplyDelete
  5. hi _mohd i really need your help i hope you help me. i made my blog before two month. my blog address is www.bcsexamguru.blogspot.com
    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 ...
    bcsexamguru.blogspot.com/2009/11/pune-uni-total-collage-list.html - 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

    ReplyDelete
  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>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>

    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.

    ReplyDelete
  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

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

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

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

    ReplyDelete
  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: ngthfong@gmail.com

    ReplyDelete
  12. Update:

    Sorry for the inconvenience, use this code instead,

    .post blockquote {
    background: #000 url(http://2.bp.blogspot.com/_7wsQzULWIwo/SwrLJYGc77I/AAAAAAAACUE/-dlubJwo7Ts/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;
    }

    .post 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;
    }


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




    It will work like 123 now!! =D

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

    please send me tutorial abaout thats.
    my e-mail: erwancapullet@yahoo.com

    thanks....

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

    please send me e-mail about the tutorial.
    my email : erwancapullet@yahoo.com

    ReplyDelete
  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
    www.i-blogger.info
    www.hcg411.info

    ReplyDelete
  16. @erwan @Brian

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

    ReplyDelete
  17. I to have a blog
    It is a games blog
    url: http://1gbgames.blogspot.com/
    so i want to get 2 blockquotes
    i.e.
    i want one blockquote for download link
    and other for description
    how can i do it
    i use pro blogger template

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

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

    Regards,
    Admin of manual article submission

    ReplyDelete
  20. This is great ! i'm sharing the tutorial on my blog http://digita7seven.blogspot.com.

    Thanks !

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

    ReplyDelete