Hi visitors!! Now days CSS3 has become very popular and it gives a nice and stylish touch to your blog. It is totally different and easy to handle then jquery , but it gives similar results as comparison of it. Its very light and easy to install, So today we have came up with a kind of trick which is supported by css3, after applying this trick your header logo will perform a rainbow effect when a visitor will hover over your blog’s logo or header, the tricks contains simple but effective coding so it will not affect your page speed, Let’s see the demo first.
Table of Contents
Features:
1.) Awesome And Cute Style.
2.) No J-Query Or JavaScript.
3.) Based Upon Pure CSS3.
4.) Quick To Load.
5.) Easy To Add.
6.) Multi Colour Rainbow.
7.) Will Make Your Header Blinking Like Rainbow On Hover.
8.) Cross Browser Support.
9.) Will Not Disturb Or Original Template.
10.) Eye Catching Coded.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search ]]></b:skin> Code.
7.) Now Copy The Below Code And Paste It Before ]]></b:skin> Code..
#exe_animation_main{width: 100%;}#exe_animation_data{-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-ms-transition: all 4s ease;-o-transition: all 4s ease;transition: all 4s ease;}#exe_animation_data{-webkit-filter: hue-rotate(919deg) saturate(500%) grayscale(0%) sepia(0%) contrast(97%) invert(0%);}If Header Contain Image:
8.) Press [CTRL+F] To Search The Below Code.
<!–Show the image only–>
<div id=’header-inner’>
9.) Now Copy The Below Code And Paste It After The Above Code.
<div id='exe_animation_main'> <div id='exe_animation_data'>
10.) Now Again Find The Below Code Just After 7-8 Line Before Previous One.
</b:if>
11.) And Just After It, Paste The Below Code.
</div></div>
If Header Didn’t Contain Image:
8.) Press [CTRL+F] To Search The Below Code.
<!–No header image –>
<div id=’header-inner’>
9.) Now Copy The Below Code And Paste It After The Above Code.
<div id='exe_animation_main'> <div id='exe_animation_data'>
10.) Now Again Find The Below Code Just After 6 Line Before Previous One.
<b:include name=’description’/>
11.) And Just After It, Paste The Below Code.
</div></div>
12.) Click “Save Template” And Done.
Customization:
1.) There Is No Need For Customizing.
About the Author:Deep is a 17 year old young Blogger, currently living in West Bengal, India. He is Founder cum editor-in-chief of SkillBlogger He is not a professional. But Still he can play with Blogger Template Codes, Web Developing, Graphic Designing, Html, Css, Jquery,logo Designing and Blogger Widgets.
Nice article and well defined. Will try it on my blog.
Welcome here and thanks for liking our article.