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 in Normal Mode
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.
EmoticonEmoticon