Home
Blogger

Add Disco light effect on Blogger Images

rainbow effect on Blogger images
rainbow effect

Though we have already well-known with rainbow effect trick in Blogger different links but now we will able to use a disco light effect in all blogger images which is really charming. A visitor will suddenly attract when s/he will see this effect. Actually this trick support on webkit supported browsers such as Google Chrome, Opera, Safari. But now other browsers are adding this feature where we can see this effect.  Obviously the code is based on pure CSS so it won’t affect on blog loading time.

image search
Image in Normal Mode

blog images
Changeable Colors after mouse over

This trick will work like magic. After adding the code when you mouse over any blog image then the image will change different color like rainbow effect on text. I think this is pretty cool so lets proceed to the tutorial. Installing this trick is very easy and I am sure that your blog visitors will going to like this.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  ►

Step 3 Now Find this code ]]></b:skin> by Pressing  Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> 

@-webkit-keyframes hue {
100% { -webkit-filter:hue-rotate(360deg); }
}
img:hover {
-webkit-animation:hue 1s linear infinite;
}
/* Trick by www.bloggerspice.com*/
::-webkit-selection {background:#FFF;color:#eee;text-shadow:0 -1px 1px #fff;}
/* Scroller browser */
::-webkit-scrollbar {width:19px;}
/* Track */
::-webkit-scrollbar-track {box-shadow:inset 0 0 5px rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.3);-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
/* Handle */
::-webkit-scrollbar-thumb {-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:#FF9000;box-shadow:0 0 6px #FF9000;-webkit-box-shadow:0 0 6px #FF9000;-moz-box-shadow:0 0 6px #FF9000;}
::-webkit-scrollbar-thumb:window-inactive {background: #FF9000;}

Step 5 Now Save the template. 

To see the effect just go to your blog and point your mouse on blog image and see the magic. Your blog image will change different color. If you feel any problem then feel free to contact with me. But remember that this effect will visible only webkit supported browsers only. Mozila firefox doesn't support this.

7 comments

  1. awesome post bro. x-)
    • thanks Aslam :)
  2. Thanks again Mohammad is super this post!!

    Too bad for mozilla, here in greece is likely the number one browser!
    • Nice to see u here after long time..Thanks for commenting and keep in touch :)
    • Always i watch you my friend!!
  3. That's Really Great, But This Code Changed My Blog's Scroll Bar..
    @Muhammad Fazle Rabbi
    • Hi Raaja I think you are using satankMKR template. His template included many javascript and hosted on template itself..so it may create some changes on your existing widget.
Go Up