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*/
::-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.
esobondhu says: 10/31/2013

awesome post bro. x-)

BloggerSpice says: ADMIN 10/31/2013

thanks Aslam :)

vaiol says: 11/01/2013

Thanks again Mohammad is super this post!!

Too bad for mozilla, here in greece is likely the number one browser!

BloggerSpice says: ADMIN 11/02/2013

Nice to see u here after long time..Thanks for commenting and keep in touch :)

vaiol says: 11/02/2013

Always i watch you my friend!!

Muhammad Ali says: 2/01/2014

That's Really Great, But This Code Changed My Blog's Scroll Bar..
@Muhammad Fazle Rabbi

BloggerSpice says: ADMIN 2/01/2014

Hi Raaja I think you are using satankMKR template. His template included many javascript and hosted on template it may create some changes on your existing widget.

Contact Form


Email *

Message *