Add Disco light effect on Blogger Images

rainbow effect on Blogger images

7
data:blog.title
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.
Add Disco light effect on Blogger Images
4 Stars stars - "Add Disco light effect on Blogger Images" Though we have already well-known with rainbow effect trick in Blogger different links but now...

awesome post bro. x-)

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

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.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *