How to brand an Animated header without Flash inward Blogger

0
55
My blog’s header is something that close of my readers asks ‘how to brand a header similar that’, this postal service is particularly for them. You tin sack role Flash to brand a header animate but the work is that flash makes website slower but amongst CSS it’s also piece of cake as well as comfortable, it’s friendly amongst the page. Let’s encounter how to brand header similar mines

This tutorial is for Blogger user, other’s mightiness role the CSS but recollect to laid the shape at the correct place.


The header on my has a skillful popularity as well as many readers wanted to know the key, how to brand their header similar this too, i said them hold off for a postal service as well as at ane time hither it is. We volition mainly operate amongst CSS, every bit nosotros stimulate got to alone pattern the Header, HTML is already inwards the template.

The CSS nosotros volition use

To shape an animation trial on hover, nosotros stimulate got used the novel CSS3 properties for improve experience, CSS3 is a novel version of CSS, amongst CSS3 it’s non piece of cake to create to a greater extent than attractive pages as well as designs and thus every bit the header.


Actually there’s 2 mode, ane is that yous tin sack alone laid the trial for pages other than home-page. I volition render CSS for both the modes. You may alone apply ane CSS code block, adding all modes volition drive errors.

No header Effect on Home Page – This CSS volition brand your header animated as well as designed alone on postal service pages,pages, index pages etc. Your header volition hold out default on Home Page.

.Header h1 a  {  border-color:black !important;     text-decoration: none;  font-size: 70px; font-family: consolas; background-color: aliceblue ; border-style: solid; border-top-style: none; border-bottom-style: none; padding: 20px 25px 20px 25px; border-radius: 15px; border-width: 16px; border-bottom-right-radius: 76px; border-top-left-radius: 76px; color: dark !important; transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s; -webkit-transition:all 1s,border-color 1s ease-in-out; -ms-transition:all 1s,border-color 1s ease-in-out; -moz-transition:all 1s,border-color 1s ease-in-out; -o-transition:all 1s,border-color 1s ease-in-out; }    .Header h1 a:hover {  color: white !important; border-style: solid;  border-top-style: none; border-bottom-style: none; border-width: 16px; padding: 20px 25px 20px 25px; border-radius: 15px;  border-bottom-left-radius: 76px; border-top-right-radius: 76px; background-color: Gainsboro !important; border-color: Grey !important; } 

The CSS is long, but industrial plant swell when applied to blog. Don’t know where to add together this CSS ? Click hither to know how to add together CSS inwards Blogger


If yous are feeling to lazy to glue such big CSS, thus yous mightiness role the hosted CSS file to become the CSS styles. To practice that yous stimulate got to glue an HTML tag within your <head> tag, for blogger user Go to Blogger Dashboard > Template > Edit HTML > Proceed > Using CTRL+F search for </head> in the template as well as glue this link tag merely higher upward it.
 

<link rel='stylsheet' href='http://dl.dropbox.com/u/80435960/header-linkeffect.css' type='text/css'/> 

And Save. It should hold off similar this. 


 

Effect on header on all pages as well as dwelling draw solid page – If yous stimulate got tried the terminal CSS, thus yous stimulate got seen that it alone industrial plant on post-pages as well as other pages other than homepage, this CSS is universal as well as applies the trial on homepage also. Let’s overview the CSS.

/************************************************ Design taken from http://stramaxon.blogspot.com Designed past times : Deepak Kamat ************************************************/ .Header h1 a  {  border-color:black !important;     text-decoration: none;  font-size: 70px; font-family: consolas; background-color: aliceblue ; border-style: solid; border-top-style: none; border-bottom-style: none; padding: 20px 25px 20px 25px; border-radius: 15px; border-width: 16px; border-bottom-right-radius: 76px; border-top-left-radius: 76px; color: dark !important; transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s; -webkit-transition:all 1s,border-color 1s ease-in-out; -ms-transition:all 1s,border-color 1s ease-in-out; -moz-transition:all 1s,border-color 1s ease-in-out; -o-transition:all 1s,border-color 1s ease-in-out; }    .Header h1 a:hover {  color: white !important; border-style: solid;  border-top-style: none; border-bottom-style: none; border-width: 16px; padding: 20px 25px 20px 25px; border-radius: 15px;  border-bottom-left-radius: 76px; border-top-right-radius: 76px; background-color: Gainsboro !important; border-color: Grey !important; }    /*********************************** Both Link as well as Non-link ***********************************/  .Header h1  {  cursor:default;     border-color:black !important;     text-decoration: none;  font-size: 70px; font-family: consolas; background-color: aliceblue ; border-style: solid; border-top-style: none; border-bottom-style: none; padding: 20px 25px 20px 25px; border-radius: 15px; border-width: 16px; border-bottom-right-radius: 76px; border-top-left-radius: 76px; color: dark !important; transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s; -webkit-transition:all 1s,border-color 1s ease-in-out; -ms-transition:all 1s,border-color 1s ease-in-out; -moz-transition:all 1s,border-color 1s ease-in-out; -o-transition:all 1s,border-color 1s ease-in-out; }    .Header h1:hover  {  color: white !important; border-style: solid;  border-top-style: none; border-bottom-style: none; border-width: 16px; padding: 20px 25px 20px 25px; border-radius: 15px;  border-bottom-left-radius: 76px; border-top-right-radius: 76px; background-color: Gainsboro !important; border-color: Grey !important; }   

How practice i add together this CSS inwards Blogger ?

If yous mean value the CSS is really complicated as well as yous don’t merely desire to mess things upward thus yous may endeavor this. Adding this link tag within your template’s <head> thus it volition charge the given CSS. This is an ane draw link tag.
For blogger user Go to Blogger Dashboard > Template > Edit HTML > Proceed > Using CTRL+F search for </head> in the template as well as glue this link tag merely higher upward it.


<link rel='stylsheet' href='http://dl.dropbox.com/u/80435960/header-effect.css' type='text/css'/> 

So at ane time yous know how to brand a cool looking header similar mine, promise yous volition portion the post. 


Related Posts –


Sumber http://www.stramaxon.com